css hover伪类搞定,不需要js。js的话对应onmouseover/onmouseenter,onmouseout/onmouseleave事件,需要添加2个事件来实现显示隐藏,一个的话需要进行遍历隐藏
css hover代码如下
<style>
.item{position:relative;width:100px;height:200px;border:solid 1px #ccc;display:inline-block;margin-right:10px}
.item .more{display:none;position:absolute;bottom:10px;width:50px;line-height:20px;border-radius:10px;left:50%;margin-left:-25px;}
.item:hover .more{display:block}
</style>
<div class="item">
<a href="#" class="more">找相似</a>
</div>
<div class="item">
<a href="#" class="more">找相似</a>
</div>
有帮助麻烦点下【采纳该答案】,谢谢~~有其他问题可以继续交流~
鼠标悬停事件onmouseover,可以看看下面的显示隐藏效果。
<html>
<body>
<div class="sam_tops_button" onmouseover="document.getElementById('sam_tops').style.display='';" onmouseout="document.getElementById('sam_tops').style.display='none';">鼠标悬浮时显示</div>
<div class="sam_tops_a" id="sam_tops" style="display:none;"><!--这里默认隐藏-->
<ul>
<li><a href="#">链接Links</a></li>
<li><a href="#">链接Links</a></li>
<li><a href="#">链接Links</a></li>
<li><a href="#">链接Links</a></li>
<li><a href="#">链接Links</a></li>
<li><a href="#">链接Links</a></li>
</ul>
</div>
</body>
</html>
这是鼠标的移入移出事件,onmouseover:鼠标移入事件,onmouseout:鼠标移出事件
通过移入,修改css样式将按钮显示出来,移出去则再将css对应的样式设置为隐藏
onmouseover
监听onmouseenter事件,鼠标移入显示对应内容,监听onmouseout事件,鼠标移出再隐藏内容
我觉得hover简单些