CSS：ホバーの色を変更してください

私はクリック可能な画像のウェブサイトで作業していましたが、...:hoverの権利を得ることができません。私は0.1の不透明度で白い色で画像を重ねるようにしたい。CSS：ホバーの色を変更してください

<html> 
<head> 
    <style> 
     body {padding: 0; margin: 0;} 
     img { 
      margin-top: -10px; 
      width: 100%; 
      height: auto; 
     } 
     a:hover { 
      background-color: rgba(255, 255, 255, 0.1); 
     } 
     #asca:hover {background-color: rgba(255, 255, 255, 0.1);} 
     #fhca:hover {background-color: rgba(255, 255, 255, 0.1);} 
     #asca img:hover {background-color: rgba(255, 255, 255, 0.1);} 
     #fhca img:hover {background-color: rgba(255, 255, 255, 0.1);} 
    </style> 
</head> 
<body> 
    <a id="asca" href="asc.php"> 
     <img src="Pictures/chevcorvette4kp.png" width="4096" height="900" alt="ascpic"> 
    </a> 
    <a id="fhca" href="fhc.php"> 
     <img src="Pictures/fhyper.png" width="4096" height="900" alt="fhcpic"> 
    </a> 
</body> 
</html>

私が実際にホバー上のすべての色に変更しようとしましたが、動作していないようです。

出典

2017-08-09 J. Doe

実際には、画像の上に何も配置していないので、もちろん機能しません。画像の背景色を変更するだけです。最初にイメージの上に（擬似）要素を配置し、その要素の背景を変更する必要があります。 – CBroe

、背景が有効になりません不透明度を使用してみてください。..

body {padding: 0; margin: 0;} 
 
     img { 
 
      margin-top: -10px; 
 
      width: 100%; 
 
      height: auto; 
 
     } 
 
     a:hover img{ 
 
      opacity:0.2; 
 
     } 
 
     #asca:hover {background-color: rgba(255, 255, 255, 0.1);} 
 
     #fhca:hover {background-color: rgba(255, 255, 255, 0.1);} 
 
     #asca img:hover {background-color: rgba(255, 255, 255, 0.1);} 
 
     #fhca img:hover {background-color: rgba(255, 255, 255, 0.1);}

<a id="asca" href="asc.php"> 
 
     <img src="http://via.placeholder.com/350x150" alt="ascpic"> 
 
    </a> 
 
    <a id="fhca" href="fhc.php"> 
 
     <img src="http://via.placeholder.com/350x150" alt="fhcpic"> 
 
    </a>

出典

2017-08-09 12:40:17

ありがとう、それはうまくいったが、 "margin-top：-10px;"を取り除いた後も画像間に白い境界線がある。万が一修正をご存知ですか？ –

申し訳ありませんが、私はupvoteできるように十分な担当者がいません。 –

woops、表示ブロックが機能しました。 –

私は今テストすることはできませんが、あなたがzインデックスのプロパティを使用しようとすることができます。

img { 
    margin-top: -10px; 
    width: 100%; 
    height: auto; 
    z-index: 0; 
} 
a:hover { 
    background-color: rgba(255, 255, 255, 0.1); 
    z-index: 10; 
}

出典

2017-08-09 12:40:42 Linkliman

あなたのCSS の問題はホバーに設定されている背景色が背後前景画像であると前景画像ブロックそれので、目に見えることはありませんです。

このようにCSSを更新すると、現在のHTMLを維持しながら、効果が得られます。（CSSの注目すべきビットがコメントし）

<style> 
    body {padding: 0; margin: 0;} 
    img { 
     margin-top: -10px; 
     width: 100%; 
     height: auto; 
    } 
    a { 
     background-color: #fff; /* Give the <a> tag a white background */ 
    } 
    a:hover img { 
     opacity: .9; /* reduce the transparency of the foreground image by 10%, allowing the white background to show through 10%. */ 
    } 
</style>

出典

2017-08-09 12:45:03

この方法を試してください。

a { 
    position:relative; 
    overflow:hidden; 
} 
a:before{ 
    content: ""; 
    position:absolute; 
    width:100%; 
    height:100%; 
    top:0; 
    left:0; 
    background-color:rgba(255, 255, 255, 0.78); 
    opacity: 0; 
    transition:all ease .3s; 
} 
a:hover:before { 
    opacity:1; 
}

出典

2017-08-09 12:45:54

画像がbackground-color独自のを覆っているので、それは動作しません。そこは後にしている効果を達成するためのいくつかの方法がありますが、最も簡単でストレートフォワードだけでアンカータグにbackground-colorを使用し、ホバー上の画像に不透明度を変更することです。

<html> 
<head> 
    <style> 
     body {padding: 0; margin: 0;} 
     img { 
      margin-top: -10px; 
      width: 100%; 
      height: auto; 
     } 

     #asca, 
     #fhca { 
      background-color: rgb(255,255,255); 
     } 

     #asca:hover img, 
     #fhca:hover img { 
      opacity: 0.9; 
     } 
    </style> 
</head> 
<body> 
    <a id="asca" href="asc.php"> 
     <img src="Pictures/chevcorvette4kp.png" width="4096" height="900" alt="ascpic"> 
    </a> 
    <a id="fhca" href="fhc.php"> 
     <img src="Pictures/fhyper.png" width="4096" height="900" alt="fhcpic"> 
    </a> 
</body> 
</html>

出典

2017-08-09 12:57:35 jberglund

Thxを助けている場合 –

問題ありません。それが働いたハッピー。 – jberglund

CSS：ホバーの色を変更してください

答えて

関連する問題