Question

如何更改此确切代码以对鼠标悬停执行悬停效果？

我的HTML代码是：

  <a href="#"><img src="images/twitter.png" width="44" height="45" title="Twitter" alt="Twitter onmouseover="this.src='facebook-hover';" /></a>
  <a href="#"><img src="images/facebook.png" width="44" height="45" title="Facebook" alt="Facebook"/></a>
  <a href="#"><img src="images/twitter.png" width="44" height="45" title="Twitter" alt="Twitter" /></a>
  <a href="#"><img src="images/twitter.png" width="44" height="45" title="Twitter" alt="Twitter" /></a>

我不知道如何使用这个javascript

请帮忙

Answer 1

试试这个

      <a href="#"><img src="images/twitter.png" width="44" height="45" title="Twitter" alt="Twitter" onMouseOver="this.src='images/facebook-hover.png'"></img></a>
      <a href="#"><img src="images/facebook.png" width="44" height="45" title="Facebook" alt="Facebook"/></a>
      <a href="#"><img src="images/twitter.png" width="44" height="45" title="Twitter" alt="Twitter" /></a>
      <a href="#"><img src="images/twitter.png" width="44" height="45" title="Twitter" alt="Twitter" /></a>

根据您的意愿

      <a href="#" id="parent1" onMouseOver="changesrc(event,'images/twitter_hover.png')"><img id="child1" src="images/twitter.png" width="44" height="45" title="Twitter" alt="Twitter"></img></a>  
      <a href="#" id="parent2" onMouseOver="changesrc(event,'images/facebook_hover.png')"><img id="child2"src="images/facebook.png" width="44" height="45" title="Facebook" alt="Facebook"></img></a>
      <a href="#" id="parent3" onMouseOver="changesrc(event,'images/twitter_hover.png')"><img id="child3" src="images/twitter.png" width="44" height="45" title="Twitter" alt="Twitter"></img></a>
      <a href="#" id="parent4" onMouseOver="changesrc(event,'images/twitter_hover.png')"><img id="child4" src="images/twitter.png" width="44" height="45" title="Twitter" alt="Twitter"></img></a>

并使用此脚本

function changesrc(event,src_path) {
var t=event.target.id;
  $('#'+t).attr('src',src_path)
 }

Answer 2

使用此：
HTML：

<a href="#"><img src="images/twitter.png" id="twitter_img" width="44" height="45" title="Twitter" alt="Twitter" onmouseover="test()" /></a>

JavaScript的：

function test(){
documnet.getElementById("twitter_img").src="whatever you want to replace it with";
}

Answer 3

你应该有一个CSS规则为：

a img#twitter{
   background-image: url('/images/twitter.png');
   width: 44px;
   height: 45px;
}
a img#twitter:hover{
  background-image: url('/images/twitter-hover.png');
}

您的HTML应该是：

<a href="#"><img id="twitter" src="images/twitter.png" title="Twitter" alt="Twitter" /></a>

现在你提到了我知道的确切代码。然后您可以使用：

a img[src="images/twitter.png"]{
   background-image: url('/images/twitter.png');
   width: 44px;
   height: 45px;
}
a img[src="images/twitter.png"]:hover{
  background-image: url('/images/twitter-hover.png');
}

http://www.corelangs.com/css/box/hover.html http://kyleschaeffer.com/development/pure-css-image-hover/

Answer 4

试试这个：

添加＆＃34; hover-src＆＃34; img标签中的属性和onmouseover =＆＃34; test（this）＆＃34;。

<强> HTML：

 <a href="#"><img src="images/twitter.png" width="44" hover-src="images/twitter.png" height="45" title="Twitter" alt="Twitter" onmouseover="test(this);" /></a>
  <a href="#"><img src="images/facebook.png" width="44" hover-src="images/facebook.png" height="45" title="Facebook" alt="Facebook" onmouseover="test(this);"/></a>
  <a href="#"><img src="images/twitter.png" width="44" hover-src="images/twitter.png" height="45" title="Twitter" alt="Twitter" onmouseover="test(this);" /></a>
  <a href="#"><img src="images/twitter.png" width="44" hover-src="images/twitter.png" height="45" title="Twitter" alt="Twitter" onmouseover="test(this);" /></a>

<强>使用Javascript：

function test(objImg){
      objImg.src = objImg.getAttribute("hover-src");
}

悬停图像中的问题

4 个答案: