Question

我有以下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应该出现并消失

所以，请帮助解决这个问题

提前致谢

Answer 1

建议1（javascript）：

你需要这个＆＃39;关键字（How does the "this" keyword work?）。

https://jsfiddle.net/2dyxydLa/

上的工作示例

＆＃13;

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

＆＃13;

.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;


}

＆＃13;

<!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>

＆＃13;

建议2（css）：

根据@ super-xp的建议，你可以简单地使用CSS：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

你可以使用：悬停做这个，例如有两个元素，classname是a和b

如果.a是祖先节点

.a:hover .b {display: block}

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

.a:hover + b {display: block}

另外，你可以使用css3过渡来使其顺利

Answer 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>

鼠标移除时自动显示鼠标悬停和隐藏的div

3 个答案:

建议1（javascript）：

建议2（css）：