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

时间:2014-01-01 10:36:50

标签: jquery html css

我有很多.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>

3 个答案:

答案 0 :(得分:1)

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

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

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

答案 1 :(得分:0)

是的,您可以使用$(this)之类的:

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

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

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

.PlaceViewIcon :hover
{
   ...
}

答案 2 :(得分:0)

您可以尝试使用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);