Question

我现在正在研究Mypage，而且我已经尝试了很长时间来制作三个[one_third]列的div中的每一个包含：text（p），（h5），（'阅读更多'）链接和图标，在onMouse（悬停）时自动更改为白色。我也需要在onMouse同时将背景颜色更改为＃00673e。

这是我的每个列的div问题的代码

HTML

[one_third]

[one_half]

<img alt="" src="http://accountabletest.com/wp-content/uploads/2014/01/imgbox11.jpg">

[/one_half]

[one_half]

<h5>CONSIDER A CARRER IN HIGHWAY CONSTRUCTION</h5>
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem           ipsum dolor sit amet.

<div class="imgB">
<img alt="" src="http://accountabletest.com/wp-content/uploads/2014/01/moreicon.png" />
</div>
<div class="readmoretext">
<h5><a href='#'>READ MORE</a></h5>
</div>
[/one_half]
[/one_third]

CSS

.one_third:hover{   
color:white;
background-color: #00673e;
opacity: 0.70;
-moz-opacity: 70%;
-webkit-opacity: 70%;
z-index: 99999999999999;
display: block;

}

我愿意接受任何解决方案。 :)您可以在提供的链接上看到，不仅div内容不会变为白色，而且img也没有获得预期的绿色叠加（整个div应该'＃00673e覆盖'不仅是文本背景。

Answer 1

无法更改read more图像的颜色。如果您真的想要更改该图像的颜色，可以使用entypo font，您可以在其中获得您选择的符号。

Answer 2

理想情况下，当鼠标进入列时，您应该有两个图像并应用悬停状态图像。我会从CSS调用图像URL：

.one_third img {
 background: url(path/of/image);
}

.one_third:hover img {
 background: url(path/of/hovered/image);
}

Answer 3

你可以试试这个，但是你的图像不再是你的HTML了，而不是SEO友好的所有..

CSS

.imgB {
  height: 30px;
  width: 30px;
  background: url("http://accountabletest.com/wp-content/uploads/2014/01/moreicon.png") no-repeat;
}
.one_third:hover .imgB {
  background: url("http://www.openmicroscopy.org/site/support/ome-artwork/ome-icon-on-white-32.png") no-repeat;
}

Fiddle

javascript-CSS悬停在div上的问题

3 个答案: