質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.51%

  • HTML5

    5124questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • Ruby on Rails 5

    3177questions

  • CSS3

    2626questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

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

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 343

r80

score 3

前提・実現したいこと

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

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

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

該当のソースコード

<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関連が悪さしているのでしょうか。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • miyabi_takatsuk

    2019/05/17 13:52

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

    キャンセル

  • mts10806

    2019/05/17 13:53

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

    キャンセル

  • yasutomi

    2019/05/17 14:26

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

    キャンセル

  • r80

    2019/05/17 15:00

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

    キャンセル

回答 2

check解決した方法

0

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

適当に・・・

<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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

同じタグがついた質問を見る

  • HTML5

    5124questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • Ruby on Rails 5

    3177questions

  • CSS3

    2626questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。