鼠标悬停时自动显示 div，鼠标移开时自动隐藏答案

【问题标题】：Automatically display div on mouse hover and hideaway when mouse remove鼠标悬停时自动显示 div，鼠标移开时自动隐藏
【发布时间】：2016-12-06 23:14:54
【问题描述】：

我有以下 div html 代码。

<div class="container">

                        <div class="images">
                                <img src="<?php echo base_url();?>assets/images/products/<?php echo $product->image;?>" />

                        </div>

                        <div class="compareme"><h3>Compare Me</h3></div>

</div>

并遵循 CSS 和 jquery 代码：

.compareme{
    position:absolute;
    bottom:70px;
    left: 110px;
    height: 300px;
    width:100%;
    background:blue;
    display:none;
    text-align: center;
    margin-left: 25px;
    margin-right:30px;

    font-size:12px;


}

$('.product-images').on('mouseover',function(){
        $('.compareme').show();

    });

问题是，当我悬停该 .image div 时，所有 div 都会显示比较我的消息。我真正想要的是当我越过 .image div 时，当我从 .image div 中移除鼠标时，那个特定的 .compareme 应该出现并消失

所以，请帮忙

提前致谢

【问题讨论】：

所以，我认为这意味着您有多个 .compareme div？
是的，它在 for 循环中显示很多产品
知道了，当您将鼠标悬停在 HTML 中的同级图像上时，您希望它显示？
是的，当我将鼠标悬停在 .image div 上时，它应该显示 .compareme div 但仅在该容器中。其他 .compareme div 不应显示

标签： jquery css html

【解决方案1】：

建议 1（javascript）：

您将需要“this”关键字 (How does the "this" keyword work?)。

工作示例也在 https://jsfiddle.net/2dyxydLa/

$('.product-image')
    .on('mouseenter', function(){
        $(this).parent().next().show();
    })
    .on('mouseleave', function(){
        $(this).parent().next().hide();
    });

.compareme{
    position:absolute;
    bottom:70px;
    left: 110px;
    height: 300px;
    width:100%;
    background:blue;
    display:none;
    text-align: center;
    margin-left: 25px;
    margin-right:30px;
    color:white;
    font-size:12px;


}

<!DOCTYPE html>
<html>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="container">    
    <div class="images">
        <img src="http://lorempixel.com/400/200/" class="product-image" />        
    </div>    
    <div class="compareme"><h1>Compare Me</h1></div>    
    <div class="images">
        <img src="http://lorempixel.com/400/200/" class="product-image" />        
    </div>    
    <div class="compareme"><h3>Compare Me</h3></div>    
    <div class="images">
        <img src="http://lorempixel.com/400/200/" class="product-image" />        
    </div>    
    <div class="compareme"><h2>Compare Me</h2></div>    
</div>
</body>
</html>

建议2（css）：

正如@super-xp 所建议的，您可以简单地使用 CSS：

.compareme {
  display:none;
}

.container:hover .compareme {
  display: inherit;
}

<div class="container">
  <div class="images">
    <img src="http://lorempixel.com/400/200/" />

  </div>

  <div class="compareme"><h3>Compare Me</h3></div>
</div>

<div class="container">
  <div class="images">
    <img src="http://lorempixel.com/400/200/" />

  </div>

  <div class="compareme"><h3>Compare Me</h3></div>
</div>

<div class="container">
  <div class="images">
    <img src="http://lorempixel.com/400/200/" />

  </div>

  <div class="compareme"><h3>Compare Me</h3></div>
</div>

【讨论】：

【解决方案2】：

你可以使用 :hover 来做到这一点，例如有两个元素，类名是 a 和 b

如果.a是祖先节点

.a:hover .b {display: block}

如果 .a 是 .b 之前的兄弟节点

.a:hover + b {display: block}

另外，您可以使用 css3 过渡使其平滑

【讨论】：

【解决方案3】：

有点狡猾，但我认为这是在纯 JavaScript 中做到这一点的一种方式。

div = {
	show: function(elem) {
		document.getElementById(elem).style.display = "block"; 
	}, 
	hide: function(elem) {
		document.getElementById(elem).style.display = "none";
	}
}

#list1 {
	display: none;
}

	<h4 class="header" onMouseOver="div.show('list1')" onMouseOut="div.hide('list1')"><strong>Support</strong></h4>
		</div>

		<div id="list4">
		<ul>
			<li class="list">Image1</li>
			<li class="list">Image2</li>
		</ul>
		</div>

【讨论】：