[英]How to apply mouse hovering effect only on one row in a table?
I have this style in html: 我在html中有这种样式:
<!-- hover style -->
<style type="text/css"> .imgBox { no-repeat; } .imgBox:hover { -moz-box-shadow: 0 0 10px #ccc; -webkit-box-shadow: 0 0 10px #ccc; box-shadow: 0 0 10px #ccc; } </style>
<!-- hover style end -->
Which makes a glowing effect over the image on mouse hover. 鼠标悬停在图像上产生发光效果。
The images are presented in a table. 图像显示在表格中。 Under each image there's a name.
在每个图像下都有一个名称。 Like this:
像这样:
I want the hover effect to apply only on the images, and exactly at their sizes (it's ok to assume all images are the same size). 我希望将悬停效果仅应用到图像上,并确切地应用其尺寸(可以假设所有图像的尺寸相同)。 But i noticed that the hovering width stretches as the name's width (the row below).
但是我注意到,悬停宽度随着名称的宽度而扩展(下面的行)。 Like this:
像这样:
Here's the table code: 这是表代码:
css: CSS:
.researchers img{
border: 2px;
border-style: solid;
border-color: black;
}
html: 的HTML:
<div class="researchers">
<table>
<th colspan="4">
TITLE
</th>
<tr>
<td>
<a href="default1.aspx"><div class="imgBox" target="_top"><img src="noImage.jpg" alt=""></div></a>
</td>
<td>
<a href="default2.aspx"><div class="imgBox" target="_top"><img src="noImage.jpg" alt=""></div></a>
</td>
<td>
<a href="default3.aspx"><div class="imgBox" target="_top"><img src="noImage.jpg" alt=""></div></a>
</td>
<td>
<a href="default4.aspx"><div class="imgBox" target="_top"><img src="noImage.jpg" alt=""></div></a>
</td>
</tr>
<tr>
<td>
Long Name
</td>
<td>
name
</td>
<td>
name
</td>
<td>
name
</td>
</tr>
</table>
</div>
(You don't need the prefixed box-shadow
anymore. They all understand the unprefixed.) (您不再需要
box-shadow
了。他们都知道没有前缀box-shadow
。)
Apply the box shadow to the img
instead of the box: 将框阴影应用于
img
而不是框:
.imgBox:hover img {
box-shadow: 0 0 10px #111;
}
Proof: http://jsfiddle.net/rudiedirkx/cjsbttsd/ 证明: http : //jsfiddle.net/rudiedirkx/cjsbttsd/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.