リンクにカーソルを合わせた時の背景色を変えたい

Question

前提・実現したいこと

リンクにカーソルを合わせた時の背景色を変えたいです。

発生している問題・エラーメッセージ

リンクを合わせると、なぜか背景色が黒になります。

該当のソースコード

<div class="col-md-8">
  <p id="test">ツイート数</p>
  <%= @tweets.count %>
  <% @tweets.each do |tweet| %>
    <div class="well well-sm tweets">
      <%= image_tag(tweet.postuser_profile_image, size: 50) %>
      <span class="user">@<%= tweet.postuser_screen_name %></span>
      <span class="content">
          <p><%= tweet.text %></p>
        <% if tweet.tweet_images %>
          <% tweet.tweet_images.each do |image| %>
            <%= image_tag(image.tweetimage_url, size: 50) %>
          <% end %>
        <% end %>
        </span>
      <span class="status">
          <p>Posted <%= time_ago_in_words(tweet.post_created_at) %> ago.</p>
        <%= tweet.favorite_count %> likes
        <%= link_to image_tag('clip.png',size: 20), clip_path(tweet),method: :patch ,id: 'clip',remote: true %>
        <%= link_to 'カテゴリー追加', edit_tweet_path(tweet) %>
        </span>
    </div>
  <% end %>
</div>

@import "bootstrap-sprockets";
@import "bootstrap";
/* universal */

body {
  padding-top: 60px;
}

section {
  overflow: auto;
}

textarea {
  resize: vertical;
}

.center {
  text-align: center;

  h1 {
    margin-bottom: 10px;
  }
}

/* typography */

h1 {
  line-height: 1;
  font-size: 3em;
  letter-spacing: -2px;
  margin-bottom: 30px;
  text-align: center;
}

p {
  font-size: 1.1em;
  line-height: 1.7em;
}


/* header */

#logo {
  float: left;
  margin-right: 10px;
  font-size: 1.7em;
  color: white;
  letter-spacing: -1px;
  padding-top: 9px;
  font-weight: bold;

  &:hover {
    color: white;
    text-decoration: none;
  }
}

/* tweets */

.well {
  height: auto;

  > img {
    border-radius: 50%;
    float: left;
  }
}

.tweets {
  .user {
    font-weight: bold;
    margin-left: 10px;
  }

  .content {
    display: block;
    margin-left: 60px;

    img {
      display: inline-block;
      padding: 0 5px;
    }
  }

  .status {
    margin-left: 60px;
    display: block;
  }
}

.post_users {
  p {
    font-weight: bold;
    margin-bottom: 0;
    margin-left: 60px;
  }

  span {
    display: block;
    margin-left: 60px;
  }

  :hover {
    cursor: pointer;
  }
}

label {
  font-weight: normal !important;
}

試したこと

a:hover{background-color: transparent ;}
a:hover{background-color: none;}

効果ありませんでした。他、どの色を指定してもhover時に背景が黒くなります。
bootstrap関連が悪さしているのでしょうか。

Comments

[miyabi_pudding]

CSSがSASS形式のままです。
コンパイル後のCSSを記載しましょう。
また、インポートしている、bootstrap-sprockets、
bootstrapも100%関係していますので、
そちらの記載をお願いします。
SASSのコンパイルはRubyで行ってる感じですか？

[m.ts10806]

直接的にサーバー側のプログラムが関係しないのであれば
HTMLとSCSSをコンパイルしたCSSの内容をそのまま提示されたほうが回答が得られやすくなると思います。

[yasutomi]

a:hoverのbackground-colorが背景色が黒くなっている原因かどうか
確かめるなら「!important」を付けなければ意味がないです。
a:hover {background-color: transparent !important;}
or
a:hover {background-color: none !important;}

[退会済みユーザー]

アセット周りの理解ができておらず、こちらの補足をもとに調べていたら解決できました。ありがとうございます汗

Answer 1

scaffoldsで自動生成されたものが原因でした。

Answer 2

適当に・・・

<style>
#a1{width:100px;height:100px;line-height:100px;display:inline-block;border:solid 1px;text-align:center;vertical-align:middle;text-decoration:none}
#a1:hover{background-Color:red}
</style>
test<a id="a1" href="#">a1</a>test