Question

我这里有这个代码，它完全像我想要的那样。当我点击悬停时滑入的图标时，我该如何制作而不是滑入？我知道我必须使用：悬停，但不确定如何做到这一点。

我创建了一个JSFiddle，代码如下：http://jsfiddle.net/804jeg82/414/

//脚本

$(document).ready(function(){
    $('.clickable').on('click' , function() {
      $(this).find('.hid').toggleClass('showme');
    });
});

// CSS

.clickable .fa {
  cursor: pointer;
  font-size: 30px;
  color: #394461; 
}
.clickable .fa, .hid {
  float: left;
}

.hid {
  width: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: all ease .35s;
  -webkit-transition: all ease .35s;
  -moz-transition: all ease .35s;
}

.showme {
  width: 150px; 
}

// HTML

<div class="clickable"><i class="fa fa-phone"></i>
  <div class="hid">Phone Number</div>
</div>
<div class="clickable"><i class="fa fa-envelope"></i>
  <div class="hid">Email Here</div>
</div>

http://jsfiddle.net/804jeg82/414/

Answer 1

您可以使用选择器.clickable:hover .hid。

当鼠标悬停在父.hid元素上时，它会选择后代.clickable元素：

Updated Example

.clickable:hover .hid {
  width: 150px;
}

如果你需要一个jQuery替代方法，那么CSS方法是最好的选择：

$('.clickable').hover(function() {
  $(this).find('.hid').toggleClass('showme');
});

根据您的评论，如果您希望元素在点击之前保持打开状态，您可以收听mouseenter / click个事件：

Updated Example

$('.clickable').on('mouseenter', function() {
  $(this).find('.hid').addClass('showme');
});
$('.clickable').on('click', function() {
  $(this).find('.hid').removeClass('showme');
});

Answer 2

试试这个

$(document).ready(function(){
    $('.clickable').hover(
        function() {
            $(this).find('.hid').addClass('showme');
        },
        function() {
            $(this).find('.hid').removeClass('showme');
        }
    );
});

创建隐藏的幻灯片影响悬停

2 个答案: