Question

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

我也试过了：

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

感谢您的帮助。

Answer 1

你有一个寻址问题。

这会徘徊div（整个图像），并且仅适用于跨度。

$("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;
}

Answer 2

使用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 3

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

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 ）调用输入/输出功能。在输入/输出内部确定它是否是输入或离开事件并将CSS应用于div内的目标范围。

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

在函数内部，效果的目标是span。 this 指向div，因此只需在 this （div）上下文中查找范围并应用CSS。

Answer 4

我无法发表评论，所以我会在这里做... 我想你需要做的就是这里：

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

Answer 5

您应该将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'}); 
        });

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

5 个答案:

jsFiddle