Question

我的网站上有悬停效果的问题... 我想要做的是将我放在桌子上的图像，当你将鼠标移到它上面时产生效果。

当我将效果应用到所有图像时效果很好，但这样头部和菜单按钮也会产生效果，而这不是我想要的。

所以我尝试仅使用div id将效果应用到表中，但是这样当你只移动一个时，表中的所有图像都会立即改变。（见我发布的代码）

接下来我尝试将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">&nbsp;</div>
</body>
</html>

从悬停效果中排除图像

0 个答案: