我想实现当鼠标悬停在可以有一个隐藏的div分区,里面包括一个图片和超链接
可以的话请注释下,尤其是onmouseout 与onmouseover功能的实现谢谢大佬
css hover伪类就行了,不需要js
xxx:hover{
}
楼上的说法确实可以实现,当然如果是js的鼠标移入移出也可以实现,你可以自己从网上找找简单的demo演示。有一些类似于这样子效果的例子。还望采纳。
设置一个div
<div class = "box">
<img>
<a href="www.baidu.com">去百度</a>
</div>
css样式
.box {width:100px; height:0px; border: 1px solid;}
.box:hover {height: 100px}
如果想有动画效果,加上transition属性
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Le Fisherman</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<style>
.box {
width: 100px;
height: 0px;
border: 1px solid;
overflow: hidden;
}
.box:hover{
height: 100px;
overflow: auto;
}
</style>
</head>
<body>
<div class="box">
<img src="" alt="">
<a href="www.baidu.com">去百度</a>
</div>
</body>
</html>
最简单的方法可以使用hover来进行css处理,这种方式上面有人给出回答了,就不多说了。下面说下你所提供的这种方式(onmouseout ,onmouseover):
$('鼠标悬停区域').on('mouseover',function () {
$('隐藏的box').fadeIn(); // 也可以用$('隐藏的box').css('display','block');
}).on('mouseout',function () {
$('隐藏的box').fadeOut(); // 也可以用$('隐藏的box').css('display','none');
});