サイトのホバー効果に問題があります... 私がやりたいのは、テーブルに配置した画像に、マウスをその上に移動したときに効果を与えることです。
すべての画像に効果を適用すると、効果は問題なく機能しますが、この方法ではヘッダーとメニューボタンにも効果が得られますが、それは私が望むものではありません.
そこで、div id を使用してのみテーブルに効果を適用しようとしましたが、そのようにして、1 つだけを移動すると、テーブル内のすべての画像が一度に変更されます。（私が投稿したコードで見られます）
次に試したのは、画像にdiv idを個別に配置することでしたが、効果がまったく機能しなくなりました...
誰にもアイデアはありますか？前もって感謝します！私はコーディングがまったく新しいので、それが非常に単純なものであることが判明した場合に備えて、事前にお詫び申し上げます:)
編集:私のコード。全然だめだったらごめんなさい！
#hoverflower:hover{opacity:0.5;filter:alpha(opacity=100)}
#left {
float: left;
margin-top: 42.3%;
width: 27%;
background: #212121;
text-align: left;
}
#right { float:right; display:; margin:0; padding:0; width:27%; background:#212121; }
body {
background-color: #212121;
}
body,td,th {
color: #CCC;
text-align: center;
</style>
</head>
<body>
<div id="left">
<p><img src="images/BIObutton.png" width="71" height="34" mar/>
</p>
<p><img src="images/CONTACTbutton.png" width="190" height="34" /></A></p></div>
<div id="box">
<p align="left"><img src="images/TITLE.png" width="46%" height="auto"/></p></img>
<div id="hoverflower">
<table width="46%" border="0" align="left">
<tr>
<div id=herp><td width="15%"><a href="flower1.html"><img src="flowers/1.jpg" width="100%" height="auto" /></a></td></div>
<td width="15%"><a href="flower2.html"><img src="flowers/2.jpg" width="100%" height="auto" /></a></td>
<td width="15%"><a href="flower3.html"><img src="flowers/3.jpg" width="100%" height="auto" /></a></td>
<td width="15%"><a href="flower4.html"><img src="flowers/4.jpg" width="100%" height="auto" /></a></td>
</tr>
<tr>
<td width="15%"><a href="flower5.html"><img src="flowers/5.jpg" width="100%" height="auto" /></a></td>
<td width="15%"><a href="flower6.html"><img src="flowers/6.jpg" width="100%" height="auto" /></a></td>
<td width="15%"><a href="flower7.html"><img src="flowers/7.jpg" width="100%" height="auto" /></a></td>
<td width="15%"><a href="flower8.html"><img src="flowers/8.jpg" width="100%" height="auto" /></a></td>
</tr>
<tr>
<td width="15%"><a href="flower9.html"><img src="flowers/9.jpg" width="100%" height="auto" /></a></td>
<td width="15%"><a href="flower10.html"><img src="flowers/10.jpg" width="100%" height="auto" /></a></td>
<td width="15%"><a href="flower11.html"><img src="flowers/11.jpg" width="100%" height="auto" /></a></td>
<td width="15%"><a href="flower12.html"><img src="flowers/12.jpg" width="100%" height="auto" /></a></td>
</tr>
<tr>
<td width="15%"><a href="flower13.html"><img src="flowers/13.jpg" width="100%" height="auto" /></a></td>
<td width="15%"><a href="flower14.html"><img src="flowers/14.jpg" width="100%" height="auto" /></a></td>
<td width="15%"><a href="flower15.html"><img src="flowers/15.jpg" width="100%" height="auto" /></a></td>
<td width="15%"><a href="flower16.html"><img src="flowers/16.jpg" width="100%" height="auto" /></a></td>
</tr>
</table>
</div>
<div id="right"> </div>
</body>
</html>