前提・実現したいこと
リンクにカーソルを合わせた時の背景色を変えたいです。
発生している問題・エラーメッセージ
リンクを合わせると、なぜか背景色が黒になります。
該当のソースコード
Ruby
1<div class="col-md-8"> 2 <p id="test">ツイート数</p> 3 <%= @tweets.count %> 4 <% @tweets.each do |tweet| %> 5 <div class="well well-sm tweets"> 6 <%= image_tag(tweet.postuser_profile_image, size: 50) %> 7 <span class="user">@<%= tweet.postuser_screen_name %></span> 8 <span class="content"> 9 <p><%= tweet.text %></p> 10 <% if tweet.tweet_images %> 11 <% tweet.tweet_images.each do |image| %> 12 <%= image_tag(image.tweetimage_url, size: 50) %> 13 <% end %> 14 <% end %> 15 </span> 16 <span class="status"> 17 <p>Posted <%= time_ago_in_words(tweet.post_created_at) %> ago.</p> 18 <%= tweet.favorite_count %> likes 19 <%= link_to image_tag('clip.png',size: 20), clip_path(tweet),method: :patch ,id: 'clip',remote: true %> 20 <%= link_to 'カテゴリー追加', edit_tweet_path(tweet) %> 21 </span> 22 </div> 23 <% end %> 24</div>
CSS
1@import "bootstrap-sprockets"; 2@import "bootstrap"; 3/* universal */ 4 5body { 6 padding-top: 60px; 7} 8 9section { 10 overflow: auto; 11} 12 13textarea { 14 resize: vertical; 15} 16 17.center { 18 text-align: center; 19 20 h1 { 21 margin-bottom: 10px; 22 } 23} 24 25/* typography */ 26 27h1 { 28 line-height: 1; 29 font-size: 3em; 30 letter-spacing: -2px; 31 margin-bottom: 30px; 32 text-align: center; 33} 34 35p { 36 font-size: 1.1em; 37 line-height: 1.7em; 38} 39 40 41/* header */ 42 43#logo { 44 float: left; 45 margin-right: 10px; 46 font-size: 1.7em; 47 color: white; 48 letter-spacing: -1px; 49 padding-top: 9px; 50 font-weight: bold; 51 52 &:hover { 53 color: white; 54 text-decoration: none; 55 } 56} 57 58/* tweets */ 59 60.well { 61 height: auto; 62 63 > img { 64 border-radius: 50%; 65 float: left; 66 } 67} 68 69.tweets { 70 .user { 71 font-weight: bold; 72 margin-left: 10px; 73 } 74 75 .content { 76 display: block; 77 margin-left: 60px; 78 79 img { 80 display: inline-block; 81 padding: 0 5px; 82 } 83 } 84 85 .status { 86 margin-left: 60px; 87 display: block; 88 } 89} 90 91.post_users { 92 p { 93 font-weight: bold; 94 margin-bottom: 0; 95 margin-left: 60px; 96 } 97 98 span { 99 display: block; 100 margin-left: 60px; 101 } 102 103 :hover { 104 cursor: pointer; 105 } 106} 107 108label { 109 font-weight: normal !important; 110} 111 112
試したこと
a:hover{background-color: transparent ;} a:hover{background-color: none;}
効果ありませんでした。他、どの色を指定してもhover時に背景が黒くなります。
bootstrap関連が悪さしているのでしょうか。
CSSがSASS形式のままです。
コンパイル後のCSSを記載しましょう。
また、インポートしている、bootstrap-sprockets、
bootstrapも100%関係していますので、
そちらの記載をお願いします。
SASSのコンパイルはRubyで行ってる感じですか?
直接的にサーバー側のプログラムが関係しないのであれば
HTMLとSCSSをコンパイルしたCSSの内容をそのまま提示されたほうが回答が得られやすくなると思います。
a:hoverのbackground-colorが背景色が黒くなっている原因かどうか
確かめるなら「!important」を付けなければ意味がないです。
a:hover {background-color: transparent !important;}
or
a:hover {background-color: none !important;}
アセット周りの理解ができておらず、こちらの補足をもとに調べていたら解決できました。ありがとうございます汗
回答2件
あなたの回答
tips
プレビュー