Question

  <div id='main'>
    <fieldset>
      <legend>Feed</legend>
      <div class='user_show_finds'>
        <span>
          <h3>
            product name
          </h3>
          <p>
            <a href="/products/1">Thorpe Obazee</a>

          </p>
        </span>
        <img alt="1331699_summer_shoes" src="/photos/1/1331699_summer.jpg?1299" />
      </div>
  </div>

我目前在我的HTML上有上述内容。

  $('#main fieldset div.user_show_finds img').hover(
    function(){
      $(this).parent('div').find('span').toggle();
    },
    function(){
      $(this).parent('div').find('span').toggle();
    }
  );

我的javascript文件中有以上内容。

有效。但问题是，当我将鼠标悬停在跨度（悬停在img上时变为可见的跨度）时，跨度将返回display:none。我知道它失去了它，因为它鼠标悬停在另一个元素上。

我怎么会失去display:block？

更新：

  $('#main fieldset div.user_show_finds span').hover(
    function() {
      $(this).css({'display':'block'});
    },
    function(){}
  );

这似乎解决了这个问题但有更清洁的方法吗？

Answer 1

通过定义你想要的语义来代替。

也许你想要它以便用户将鼠标悬停在图像上以查看跨度，然后当用户进入垃圾邮件然后离开垃圾邮件时它将消失。

如果光标离开图像并且没有移动到跨度上（这要求它们偶然接触），也许你想要它以便跨度消失。您可以通过在跨度上设置事件处理程序来完成此操作，并保留一些跟踪变量以查看哪些处理程序已触发，因此鼠标光标位于何处。然后根据需要构建逻辑。

保持显示：鼠标悬停时元素上的阻止

1 个答案: