Question

我正在尝试在链接中选择图片。

JQUERY：

$('#selskaber img').hover(function () {
    $(this).next().css({'border' : '1px solid #0167B0 !important'});
  }, 
  function () {
    $(this).next().css({'border' : '1px solid #CCCCCC !important'});
  }
);

HTML：

<div id="selskaber">
    <a target="_blank" href="#">
    <img style="border:none;" src="/images.pmg" alt="Telenor">
    </a>
</div>

更新：

我删除了下一个（）。仍然没有添加边框。

我的CSS：

#wrap #selskaber a {border:none;margin-left:10px;display:inline-block !important;
    height: 41px;
    margin-top: 5px;
    width: 150px;}

Answer 1

嗯......你为什么在这里使用Javascript？

#selskaber a img{
    border:1px solid #ccc;
}

#selkskaber a:hover img{
    border: 1px solid #0167B0;
}

将完成同样的事情，并且可以在不需要JS的情况下与IE6兼容。

Answer 2

该图片没有任何兄弟，所以接下来不会给你任何东西。

如果您尝试选择img，只需删除next()

即可

    $('#selskaber img').hover(function () {
    $(this).css({'border' : '1px solid #0167B0 !important'});
      }, 
      function () {
        $(this).css({'border' : '1px solid #CCCCCC !important'});
      }
    );

next：

描述：获取匹配元素集中每个元素的紧随其后的兄弟。如果提供了选择器，则仅当它与该选择器匹配时，它才会检索下一个兄弟。

Answer 3

您的选择器'#selskaber img'已经为您提供了图像。因此，如果您需要图像$(this)，则在悬停回调内部就足够了。无需致电next：

$('#selskaber img').hover(function () {
    $(this).css({'border' : '1px solid #0167B0 !important'});
}, 
function () {
    $(this).css({'border' : '1px solid #CCCCCC !important'});
});

Answer 4

删除next()，您已选择img代码：

$('#selskaber img').hover(function () {
  $(this).css({'border' : '1px solid #0167B0 !important'});
  }, 
  function () {
    $(this).css({'border' : '1px solid #CCCCCC !important'});
  }
);

Answer 5

您的函数中的

$(this)是<img>。 $(this).next()没什么，所以只需删除对next()的调用。

Answer 6

img元素后面没有节点。 $(this)上下文与其悬停的img元素相关。请尝试删除next()。

$('#selskaber img').hover(function () {
    $(this).css({'border' : '1px solid #0167B0 !important'});
    }, 
    function () {
        $(this).css({'border' : '1px solid #CCCCCC !important'});
    }
);

Jquery无法在链接中选择图像

6 个答案: