jQuery - 找出：悬停样式

Posted 2023-05-08

【中文标题】jQuery - 找出：悬停样式

【英文标题】：jQuery - find out :hover-styles

【发布时间】：2015-01-17 01:19:55

【问题描述】：

我有一个在悬停时增长的 div。但是：我应用了 200 毫秒的 CSS 转换。

现在，如果我在 hover() 上使用 jQuery width() 函数，我会因为动画而得到错误的值。但我需要结束状态中的悬停宽度在确切的悬停时间，而不是在结束（这就是为什么 setTimeout() 不能解决问题）。

是否可以按原样获得 :hover 样式？

HTML

<div id="parent">
    <div id="grows"></div>
</div><br><br><br><br>
<span id="width"></span>

CSS

div#parent 
    width: 100px;
    height: 100px;


div#grows 
    width: 100%;
    height: 100%;

    background-color: black;

    -webkit-transition: 0.2s ease;
    -moz-transition: 0.2s ease;
    -ms-transition: 0.2s ease;
    -o-transition: 0.2s ease;
    transition: 0.2s ease;


div#grows:hover 
    width: 150%;
    height: 150%;

还有 JS：

$(document).ready(function() 
    $('div#grows').hover(function() 
        var width = $(this).css('width')); // Is 100px but should be 150px!
    );
);

这里是 JSFiddle：http://jsfiddle.net/v15h652h/

编辑：可能还不够清楚：我需要在 :hover-style 在确切的悬停时间中定义的宽度，不是在结束，那就太晚了。

【问题讨论】：

欢迎来到 ***！请参阅"Should questions include “tags” in their titles?"，其中的共识是“不，他们不应该”。

检查这个Link尝试应用那个jsfiddle.net/v15h652h/3

【参考方案1】：

浏览器具有允许处理 CSS3 过渡（或动画）状态的事件。您可以使用transitionend 等待转换完成以执行您的回调：

$(document).ready(function() 
  $('div#grows').hover(function() 

    $(this).on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function() 
      $(this).off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend');
      $('#width').html($('#width').html() + ' ' + $(this).css('width'));
    );
  );
);

div#parent 
  width: 100px;
  height: 100px;

div#grows 
  width: 100%;
  height: 100%;
  background-color: black;
  -webkit-transition: 0.2s ease;
  -moz-transition: 0.2s ease;
  -ms-transition: 0.2s ease;
  -o-transition: 0.2s ease;
  transition: 0.2s ease;

div#grows:hover 
  width: 150%;
  height: 150%;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="parent">
  <div id="grows"></div>
</div>
<br>
<br>
<br>
<br>
<span id="width"></span>

PS：我个人更喜欢使用简单的.on() 事件处理程序然后.off() 来删除它而不是Danko 的.one()，因为.one() 将针对触发的每种事件类型执行一次（特别是Chrome，会执行两次）

【讨论】：

感谢您的帮助，但请再次阅读我的问题：“但我需要在确切的悬停时间结束状态的悬停宽度（这就是 setTimeout() 不能解决问题的原因） 。”