这个东西叫什么,鼠标悬停能够出现这种隐藏内容的😭

img

css hover伪类搞定,不需要js。js的话对应onmouseover/onmouseenter,onmouseout/onmouseleave事件,需要添加2个事件来实现显示隐藏,一个的话需要进行遍历隐藏
css hover代码如下

img

<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简单些