Question

<script>
$('.image-wrapper').mouseenter(function(e) {
  e.preventDefault();
  $(this).removeClass('image-wrapper');
});

$('.boxer').mouseenter(function(){
  $('.image_wrapper img').addClass('image_wrapper img:hover');
});
</script>

正如您所看到的，我将removeClass用于我的后台<div>悬停效果。因此，当我选择其他<div>时，只允许后台<div>悬停。

更新*我也试试。

<script>
var background = document.getElementById('.image-wrapper');
var background = false ;

$('.image-wrapper').mouseenter(function(e) {
    e.preventDefault();
    $(this).removeClass('image-wrapper');
    background = true;
 });

$('.boxer').mouseenter(function(){
    if (background = true) {
        $('.image-wrapper').addClass('image-wrapper');
    } else {
        $('.image-wrapper').removeClass('image-wrapper');
    }
});
</script>

HTML：

<div id="info_01" class="image-wrapper info_all">
    <img src="images/main_2/info_01.jpg" alt="" class="images">
    <div class="boxer"><p class="boxer_title">ABOUT</p></div>
</div>

CSS：

#info_01 {
    width:512px;
    height:384px;
    background:no-repeat;
    position:absolute;
}

.image-wrapper {
  font-size: 0;
  overflow:hidden;
}

.image-wrapper img {
  max-width: 100%;
  transition: transform .3s ease-in-out;
}

.image-wrapper:hover img {
  transform: scale(1.1); 
}

Answer 1

使用HTML和CSS，您可以更轻松地了解您尝试实现的目标您应该始终将其包含在以后的问题中。

并描述你想要的结果。
所以，这里......您希望图像下方的文本在图像放大的同时出现。

我为image-wrapper更改了font-zero css规则的名称...这更能描述其实际效果。

我使用的jQuery方法是.hover()
有两个函数可用作mouseenter和mouseleave的事件handlers。

关于按类选择元素与添加和删除元素：
使用“稳定”选择器来定位元素。

您添加和删除的类不应该也用作选择器...
除非你想“阻止”一个功能触发...
如果选择器已被移除，请不要指望触发功能这就是你迷失的地方。

您可以使用大量的jQuery方法来简化脚本我建议你书签this link。

$('#info_01 img').hover(
	function(e) {
		$(this).parent().removeClass('font-zero');
	},
	function(){
		$(this).parent().addClass('font-zero');
});

#info_01 {
  width:512px;
  height:384px;
  background:no-repeat;
  position:absolute;
}

.font-zero {
  font-size: 0;
  overflow:hidden;
}

.image-wrapper img {
  max-width: 100%;
  transition: transform .3s ease-in-out;
}

.image-wrapper:hover img {
  transform: scale(1.1); 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="info_01" class="image-wrapper font-zero">
	<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRlOChoWeklUXYE3aE4hIbKIwDKheJoxvHWkcjAeSF2fXxDDtvZ" alt="" class="images">
	<div class="boxer"><p class="boxer_title">ABOUT</p></div>
</div>

当悬停removeClass时，将addClass移到当mouseenter另一次潜水时删除的类

1 个答案: