更改圖像onmouseover和onmouseout

我使用php編碼，我想在懸停時進行簡單的圖像更改。我正在使用此代碼：更改圖像onmouseover和onmouseout

echo '<li class="'.$icon['footer_social_icon'].'"> 
     <img src="../wp-content/uploads/img1.png" 
     onmouseover="this.src="../wp-content/uploads/img2.png";" 
     onmouseout="this.src="../wp-content/uploads/img1.png";"/> 
    </li></ul>';

我不知道爲什麼它不起作用！

來源

2014-03-06 Aminesrine

看引號

onmouseover="this.src="../wp-content/uploads/img2.png";"

這就是爲什麼它失敗。你需要使用轉義的單引號，因爲你使用php來輸出HTML

onmouseover="this.src=\'../wp-content/uploads/img2.png\';"

來源

2014-03-06 14:31:52 epascarello

epascarello的答案可能會訣竅。

您也可以將兩個圖像作爲單獨的圖像放在li中，並使用CSS進行更改。

echo '<li class="'.$icon['footer_social_icon'].'"> 
    <img src="../wp-content/uploads/img1.png" class="img1" /> 
    <img src="../wp-content/uploads/img2.png" class="img2" /> 
</li></ul>';

CSS：

.img2 { 
    display: none; 
} 

li:hover .img1 { 
    display:none; 
} 

li:hover .img2 { 
    display: inline; /* Or block, whichever you prefer */ 
}

這種方式也將在計算機上工作，沒有的JavaScript。

來源

2014-03-06 14:36:11

更好的方法可能是使用CSS，因爲您不必過多擔心編碼問題。

在CSS中執行以下操作：

.icon { 
     background-image: url('/the-name-of-your-image.png'); 
     width: 100px; /* width of your image */ 
     height: 100px; /* height of your image */ 
} 
.icon:hover { 
     background-image: url('/the-image-when-you=hover.png'); 
}

你的HTML會是這個樣子：

<li class="icon"></li>

當有人移動了鼠標在LI元素的CSS將圖像更改爲一個在圖標：懸停，然後當您將鼠標移離LI元素時，它將恢復爲原始狀態。

來源

2014-03-06 14:38:11 Cameron

更改圖像onmouseover和onmouseout

回答

相關問題