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

Question

我这里有这段代码，它的工作方式非常符合我的要求。当我点击悬停时它滑入的图标时，我该如何做到这一点而不是滑入？我知道我必须使用：hover，但不确定该怎么做。

我创建了一个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。

将鼠标悬停在父.clickable元素上时，它将选择子.hid元素：

更新示例

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

然而，如果您需要jQuery替代方案，CSS方法是最好的选择：

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

---

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

更新示例

$('.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');
        }
    );
});