Question

我有一个div：

<div class="country"> 
    <div class="cty_popover">
        <p>TITLE</p>
        <ul>
            <li>NAME 1</li>
            <li>NAME 2</li>
        </ul>
    </div>

    <img src="resources/images/map-marker.png" alt=" ">
</div>

这个jQuery：

$(document).ready(function(){
    $('.country img').hover(function() {
        $(this).parents('.cty_popover').fadeIn(800);
    },
    function() {
        $('.cty_popover').fadeOut(300);
    });
});

我知道这行在jQuery中是错误的：

$(this).find('.cty_popover').fadeIn(800);

我需要定位：

.cty_popover

从函数中

：

$('.country img').hover

基本上我的问题是：

如何使用.cty_popover定位$(this)？我需要从'img＆＃39;瞄准它，但不确定如何？

我有很多这些.cty_popover div，这就是为什么我要使用$(this)所以我不会将它们全部定位。

任何想法为什么我都无法解决这个问题？

由于

Answer 1

由于img是cty_popover的兄弟，您可以使用prev()函数定位它 - 请参阅下面的演示：

＆＃13;

$(document).ready(function() {

  // hide all `cty_popover` sections initially
  $('.cty_popover').hide();

  // hover listener
  $('.country img').hover(function() {
      $(this).prev('.cty_popover').fadeIn(800);
    }, function() {
      $(this).prev('.cty_popover').fadeOut(300);
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="country">
  <div class="cty_popover">
    <p>TITLE</p>
    <ul>
      <li>NAME 1</li>
      <li>NAME 2</li>
    </ul>
  </div>
  <img src="http://placehold.it/200x200">
</div>

＆＃13;

Answer 2

由于 img 节点是 cty_popover 节点的兄弟节点，因此替换此行

$(this).parents('.cty_popover').fadeIn(800);

这应该工作

$(this).siblings('.cty_popover').fadeIn(800);

Here's一个例子

Answer 3

你应该使用兄弟姐妹：https://api.jquery.com/siblings/

查看处理HTML的示例：

$(document).ready(function(){
    $('.country').children('img').hover(function() {
        $(this).siblings( '.cty_popover').fadeIn(800);
    },
    function() {
        $('.cty_popover').fadeOut(300);
    });
});

.country {
    position. relative;
    width: 300px;
}
.country > img {
    width: 100%;
    display: block;
}
.country .cty_popover {
    display: none;
    position: absolute;
    left: 10px;
    top: 10px;
    background: rgba(255,255,0,.9);
    padding: 5px;
    border-radius: 5px;
    width: 285px;
}
.country .cty_popover:after {
    content: "";
    width: 0; 
    height: 0; 
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid rgba(255,255,0,.9);
    position: absolute;
    bottom: -20px;
    left: 50%;
    margin-left: -10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="country"> 
    <div class="cty_popover">
        <p>TITLE</p>
        <ul>
          <li>NAME 1</li>
          <li>NAME 2</li>
        </ul>
    </div>
    <img src="https://placeimg.com/300/200/tech" alt=" ">
</div>

jQuery找到一个元素

3 个答案: