Question

我有一个div包含的内容，我希望在悬停时显示title弹出窗口。我还希望整个div区域可以点击。为了使整个div可点击，我在position:absolute的左上角创建了div d的单个锚点，并使其成为div的完整宽度和高度。这样，甚至填充的空白区域也是可点击的。但是，需要悬停的元素不再能够悬停。

有没有办法确定鼠标悬停时的内容（当前元素除外），以便可以激活title属性？我不知道从哪里开始。我最初的想法是将我想悬停在元素上的元素的位置存储在一个数组中，当我将鼠标悬停在锚元素上时，检查鼠标位置，如果它落在所需的坐标内，则触发悬停。我需要使用哪些JavaScript？

这是一个简单的例子，我只想悬停一个项目，但实际上我有一个深度嵌套的div s，ul和多个img的数量并且它是我想要悬停的img。

＆＃13;

.outter {
  position:relative;
  padding:1em;
}
a {
  position:absolute;
  top:0;
  left:0;
  display:block;
  width:100%;
  height:100%;
  text-indent:-9999em;
}

＆＃13;

<div class="outter">
  <div class="inner">
    <p>None of the below will show hovered text on hover</p>
    <span title="Hovered over one">Element One</span><br/>
    <span title="Hovered over two">Element Two</span><br/>
    <span title="Hovered over three">Element Three</span><br/>
  </div>
  <a href="#">Hover on the span for more information</a>
</div>

<div class="outter">
  <div class="inner">
    <p>All the below will show hovered text on hover</p>
    <span title="Hovered over one">Element One</span><br/>
    <span title="Hovered over two">Element Two</span><br/>
    <span title="Hovered over three">Element Three</span><br/>
  </div>
</div>

＆＃13;

Answer 1

为什么不直接使用你的div与click（）事件，它看起来比100％宽度和高度锚更清洁？这也可以解决你的悬停问题。

还可以使用带有display的块：block参数INSTEAD of div。

更新

$('.hoverDiv').hover(function(){
    $(this).siblings('.inner').css({
        display: 'block'
    });
}, function() {
    $(this).siblings('.inner').css({
        display: 'none'
    });
});

// clickable
$('.hoverDiv').click(function(){
    $('.outter').append('<p>click!</p>');
});

Here's a fiddle

不确定这是否是您的结构，但它应该让您了解如何解决您的结构问题。

Answer 2

根据@IvanChepurin回答（更新前）我已点击div，将网址更改为p标记中的锚点（不错的后备位置）。

  $('.outter').on('click', function(){
    location = $(this).find('p a').attr('href');
  });

.outter {
  position:relative;
  padding:1em;
  cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="outter">
  <div class="inner">
    <p> <a href="http://www.stackoverflow.com/q/29703037">None of the below will show hovered text on hover</a></p>
    <span title="Hovered over one">Element One</span><br/>
    <span title="Hovered over two">Element Two</span><br/>
    <span title="Hovered over three">Element Three</span><br/>
  </div>
</div>

如何选择当前悬停元素下的元素

2 个答案:

更新