我希望有人能帮我解决这个问题。问题是，我有 5 个锚定标签，每个锚定标签都包含一个图像。鼠标悬停时，图像应更改为不同的图像，鼠标移开时，应回滚到之前的相同图像。我使用一些代码做到了这一点，但它根本不起作用。有时鼠标悬停有效，有时鼠标移出有效，但两者不能同时工作。也有人可以帮助我将 JavaScript 编码简化为紧凑的 jQuery 编码。
Fiddle
HTML:
<body>
<div class="home_wrapper">
<div class="header">
<div class="left_head">
<img src="Images/logo.jpg" />
</div>
<div class="right_head">
<div class="empty"></div>
<a href="#" class="menu_but" id="1" onmouseover="roll(this.id)" onmouseout="rollback(this.id)">
<img src="http://img2.imagesbn.com/p/2940147140789_p0_v4_s260x420.PNG" />
</a>
<img class="menu_line" src="Images/line.png" />
<a href="#" class="menu_but" id="2" onmouseover="roll(this.id)">
<img src="http://img2.imagesbn.com/p/2940147140789_p0_v4_s260x420.PNG" />
</a>
<img class="menu_line" src="Images/line.png" />
<a href="#" class="menu_but" id="3" onmouseover="roll(this.id)">
<img src="http://img2.imagesbn.com/p/2940147140789_p0_v4_s260x420.PNG" />
</a>
<img class="menu_line" src="Images/line.png" />
<a href="#" class="menu_but" id="4" onmouseover="roll(this.id)">
<img src="http://img2.imagesbn.com/p/2940147140789_p0_v4_s260x420.PNG" />
</a>
<img class="menu_line" src="Images/line.png" />
<a href="#" class="menu_but" id="5" onmouseover="roll(this.id)">
<img src="http://img2.imagesbn.com/p/2940147140789_p0_v4_s260x420.PNG" />
</a>
<img class="menu_line" src="Images/line.png" />
<a href="#" class="menu_but" id="6" onmouseover="roll(this.id)">
<img src="http://img2.imagesbn.com/p/2940147140789_p0_v4_s260x420.PNG" />
</a>
<img class="menu_line" src="Images/line.png" />
<a href="#" class="menu_but" id="7" onmouseover="roll(this.id)">
<img src="http://img2.imagesbn.com/p/2940147140789_p0_v4_s260x420.PNG" />
</a>
</div>
</div>
</div>
</body>
JavaScript:
function roll(a) {
var a;
//alert(a);
var alloc = document.getElementById(a);
if (a == 1) {
alloc.innerHTML = '<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSCr1SVvp2w2_tA9MEb3myB-GMC8HBA3X_b0OahVp8HBynzyGS7"/>';
} else if (a == 2) {
alloc.innerHTML = '<img src="http://www.clker.com/cliparts/0/7/9/2/11954285511639254892power_button_raoul_rene__01.svg.med.png
"/>';
} else if (a == 3) {
alloc.innerHTML = '<img src="http://www.gifs.cc/home/large-home-button-amber.jpg"/>';
} else if (a == 4) {
alloc.innerHTML = '<img src="http://www.gifs.cc/home/large-home-purple.jpg"/>';
} else if (a == 5) {
alloc.innerHTML = '<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTuEEKlyX_gmwmHSOoOCM31sCF-hs0humgJ956hOgYEDn23_3fa"/>';
} else if (a == 6) {
alloc.innerHTML = '<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRW1zA5eAA8-GcasNeSsln7J1R51lclCQqYbYE_pqZSC2WpPcs9"/>';
} else if (a == 7) {
alloc.innerHTML = '<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQHSS3Xaa0f9Jkc2bI-uQErfsNRmSHA0Q9VkSjZOrUGkyX-yj-7Ug"/>';
}
}
function rollback(obj) {
var obj;
alert(obj);
var disalloc = document.getElementById(obj);
if (obj == 1) {
disalloc.innerHTML = '<img src="http://img2.imagesbn.com/p/2940147140789_p0_v4_s260x420.PNG"/>';
}
}
CSS:
.home_wrapper {
border: 1px solid black;
width: 100%;
height: 700px;
}
.header {
//border:1px solid red;
width: 100%;
height: 14.5%;
}
.left_head {
//border:2px solid black;
width: 25.5%;
height: 100%;
float: left;
margin-left: 1%;
background-image: url(Images/bg.png);
//background-repeat:repeat-x;
//background-repeat:repeat-y;
background-repeat: repeat;
}
.left_head img {
width: 100%;
height: 89%
}
.right_head {
margin-left: 0.2%;
//border:1px solid red;
width: 73%;
height: 100%;
float: left;
background-image: url(Images/bg.png);
//background-repeat:repeat-x;
//background-repeat:repeat-y;
background-repeat: repeat;
}
.menu_but img {
margin-top: 2.8%;
width: 12%;
height: 70%;
}
.menu_line {
margin-bottom: 3%;
}
.empty {
//border:1px solid black;
width: 8%;
height: 100%;
float: left;
}
最佳答案
使用 jQuery 会非常简单。下面的 Fiddle 将为您提供帮助。
http://jsfiddle.net/17g6q8k0/2/
var sourceSwap = function () {
var $this = $(this);
var newSource = $this.data('alt-src');
$this.data('alt-src', $this.attr('src'));
$this.attr('src', newSource);
}
$(function() {
$('img[data-alt-src]').each(function() {
new Image().src = $(this).data('alt-src');
}).hover(sourceSwap, sourceSwap);
});
关于javascript - 单个 anchor 标记中的 mouseover 和 mouseout 事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26857375/