Question

我有很多.PlaceViewIcon div包含相同的图像，问题是当我只悬停在一个div上时，其余的div s change the src also . i want the only div that i hover to change not all div s。没有把id放在每个元素上。我认为问题可以解决（这）我试图阅读它，但不明白它是如何工作的

这是我的jquery：

$( document ).ready(function() {
 $(".PlaceViewIcon").mouseover(function() { 
           $('img').attr("src", "../../../prototype/img/plan-view-hover.png");
           });
 $(".PlaceViewIcon").mouseout(function() {
           $('img').attr("src", "../../../prototype/img/plan-view.png");
          });

});

HTML：

<div class="span2" >
                  <p  class="PlaceViewIcon">
                   <a href="#"><img src="../../../prototype/img/plan-view.png" width="25" height="20" /></a></p>
                </div>

Answer 1

实际上，您可以编辑html内容的所有图像。如果您只想编辑此div中的图像，您应该：

 $(this).find('img').attr("src", "../../../prototype/img/plan-view.png");

所以，在div中，它将找到一个img属性，它将编辑他的源代码。希望它能帮到你

Answer 2

是的，您可以使用$(this)之类的：

$(".PlaceViewIcon").each(function(){
    $(this).mouseover(function(){
      ...
    }).mouseout(function(){
      ...
    });
});

http://jsfiddle.net/hescano/7RH3j/

但我想知道你是否可以使用伪css悬停来解决这个问题：

.PlaceViewIcon :hover
{
   ...
}

Answer 3

您可以尝试使用xpath

查找元素

使用jquery可能看起来像这样

第一次创建xpath函数

function getXPath( element )
{
    var xpath = '';
    for ( ; element && element.nodeType == 1; element = element.parentNode )
    {
    var id = $(element.parentNode).children(element.tagName).index(element) + 1;
        id > 1 ? (id = '[' + id + ']') : (id = '');
        xpath = '/' + element.tagName.toLowerCase() + id + xpath;
    }
    return xpath;
}

第二次创建悬停功能

var xp;

$('.tags').mouseover(function() {
    xp = getXpath(this);
});

xpath第三次查找

var elementLookedupXPath = $(xml).find(xp);

在没有类的情况下对一个元素进行悬停效果

3 个答案: