Question

我在Jquery中构建一个菜单，当鼠标悬停在文本链接上时，我需要能够更改图像src。

我已经建立了具有基本图像翻转的菜单，但是当锚链接中的文本也在鼠标悬停时我需要更改图像。因此，当鼠标悬停时，以及图像本身时，图像将翻转...

到目前为止，这是我的代码：

CSS：

 #subNav {
 list-style: none;
 }
 #subNav li {
 width: 130px;
 float: left;
 text-align:center;
 }
 #subNav li a {
 font-family: 'News Cycle', sans-serif;
 font-size:14px;
 text-decoration:none;
 color: #d33800;
 }
 #subNav li a:hover {
  color:#666666;
  }
 #subNav li a img {
  display: block;
  margin:auto;
  width: 88px;
  }

JQUERY：

  $(document).ready(function () {

//rollover swap images with rel
var img_src = "";
var new_src = "";

$(".overlay").hover(function(){
//mouseover
img_src = $(this).attr('src'); //grab original image
new_src = $(this).attr('rel'); //grab rollover image
$(this).attr('src', new_src); //swap images
$(this).attr('rel', img_src); //swap images
},
function(){
//mouse out
$(this).attr('src', img_src); //swap images
$(this).attr('rel', new_src); //swap images
});

//preload images
var cache = new Array();
//cycle through all rollover elements and add rollover img src to cache array
$(".overlay").each(function(){
   var cacheImage = document.createElement('img');
cacheImage.src = $(this).attr('rel');
cache.push(cacheImage);
});

    });

HTML

<ul id="subNav">
 <li><a href=""><img src="1-orange.png" rel="1-grey.png" class="overlay" alt="Bookings">Bookings</a></li>
 <li><a href=""><img src="2-orange.png" rel="2-grey.png" class="overlay" alt="Accomodation">Accomodation</a></li>
 <li><a href=""><img src="3-orange.png" rel="3-grey.png" class="overlay" alt="Eating">Eating</a></li>
 <li><a href=""><img src="4-orange.png" rel="4-grey.png" class="overlay" alt="Dates &amp; Prices">Dates &amp; Prices</a></li>
 <li><a href=""><img src="5-orange.png" rel="5-grey.png" class="overlay" alt="Travel Options">Travel Options</a></li>
 <li><a href=""><img src="6-orange.png" rel="6-grey.png" class="overlay" alt="Contact">Contact</a></li>
</ul>

Answer 1

除非您正在做某些我不知道的事情，否则jQuery不需要在鼠标悬停时更改图片。

您是否尝试将图像替换为背景，然后通过CSS中的悬停事件更改背景？

您是否有任何关于图片的实例，以便我们更好地了解您要完成的任务（并帮助您更好地解决问题）。

Jquery - 使用锚文本翻转更改图像

1 个答案: