我不能只用 Jquery 悬停一个元素

Question

正如我在标题中所说，我的问题是我不能只悬停一个元素。我给了一些效果，但每个元素都受到影响。我知道这是一个简单的问题，我搜索 google 和 Whosebug，我找到了。但任何解决方案都有效。

我也试过了：

  $("section#box").mouseenter(function() {
             $('section#box span').css({'transition':'1s','top':'80px'}); 
        }).mouseleave(function() {
              $('section#box span').css({'transition':'1s','top':'-80px'}); 
        });

感谢您的帮助。

Answer 1

使用 jQuerys hover 处理鼠标进入功能和鼠标离开功能：

$("section #box").hover(
  function() {
     $('section #box span').css({'transition':'1s','top':'80px'})} 
  ,function() {
     $('section #box span').css({'transition':'1s','top':'-80px'}); 
   }
);

您也可以在悬停函数中使用 $(this).find('span') 将跨度定位到聚焦的#box。

Answer 2

你有很多语法错误（函数后缺少逗号，多余的括号）
你有很多不必要的代码（部分选择器，额外的 this 上下文）
您需要包含一个具有该方法的库（例如，jQuery），因为您没有将 jQuery 附加到您的 fiddle

jsFiddle

$("#box").on('mouseenter mouseleave', 'div', function(e) {
  var $target = $('span', this);

  if (e.type == 'mouseenter') {
    $target.css({ transition: '1s', top: '80px' });
  } else {
    $target.css({ transition: '1s', top: '-80px' });
  }

});

当 div 悬停时（例如，mouseenter、mouseleave）调用 in/out 函数。在 in/out 内确定它是进入还是离开事件并将 CSS 应用于 div.

内的目标范围

这实际上是更好的解决方案，因为您将一个事件处理程序绑定到 #box，而不是每个 div 或跨度。框悬停后，它会检查目标 (div) 是否悬停，如果悬停，则调用该函数。

在函数内部，效果的目标是span。 this 指向 div，因此只需在 this (div) 上下文中找到跨度并应用 CSS.

Answer 3

我不能评论所以我会在这里做... 我猜你需要做的如下所示：

https://css-tricks.com/text-blocks-over-image/

Answer 4

您应该将 span 添加到您的主选择器，然后您的 mouseenterer 和 mouseleave 将被包裹在该上下文中。

$("section #box span").mouseenter(function() {
             $(this).css({'transition':'1s','top':'80px','text-size':'25px'}); 
        }).mouseleave(function() {
              $(this).css({'transition':'1s','top':'-80px','text-size':'12px'}); 
        });

Answer 5

您遇到寻址问题。

这会悬停在 div（整个图像）上，并且只适用于 span。

$("section#box div").hover(
   function() {
      $('span', this).css({'transition':'1s','top':'80px'})
   }, 
   function() {
    $('span', this).css({'transition':'1s','top':'-80px'}); 
   }
);

虽然，坦率地说，这应该完全使用 CSS 转换：

section#box div {
    position: relative;
}

section#box div span {
    top: -80px;
    transition: all 1s;
    position: absolute;
}

section#box div:hover span {
    top: 80px;
}

我不能只用 Jquery 悬停一个元素

I can't hover only one element with Jquery

html

javascript

css

jquery

jquery-hover

jsFiddle