div上的javascript-CSS懸停問題

Question

我現在正在使用Mypage ，並且已經嘗試了很長時間，使三個[one_third]列的div分別包含：文本（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中調用圖片網址：

.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;
}

小提琴