html 当鼠标停留在图片上显示另外一个div

发布网友发布时间：2022-04-21 19:40

共2个回答

热心网友时间：2022-04-21 12:17

那个透明的盒子是单独写的，写好后，使用绝对定位将其移到图片盒子区域外（比如说left:9999px;），图片要求使用overflow:hidden;，这样刚开始的时候就看不见文字，
然后给图片添加hover伪类，改成你需要定位的值，鼠标移上去显示出来，，要慢慢下滑出来或者其他动态出来，使用css的过渡效果就行了

热心网友时间：2022-04-21 13:35

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {box-sizing: border-box;margin: 0;padding: 0}
.box, .aa img{width: 250px;height: 350px;overflow: hidden;}  /*范围之外不可见*/
.text {
    background: rgba(0,0,0,.5);
    padding: 10px;
    color:#fff;
    font-size: 20px;
    position: relative;
    margin-top: 0;     /*text默认处于aa盒子下面,所以不可见*/
    transition: .5s}   /*transition为过渡动画效果，时间0.5秒*/
.box:hover .text {margin-top: -72px}   /*鼠标经过box, 则text逐渐上移到aa范围内*/

.text span {font-size: 16px;color: #655c5c}
.text img {width: 100%}
</style>
</head>

<body>
<div class="box">
    <div class="aa">
        <img src="http://www.nanningsn.com/uploadfiles/adver/pro-07.jpg">
    </div>

    <div class="text">
        <p>我是隐藏的DIV标题</p> <span>我也是隐藏的内容介绍</span>
    </div>
</div>
</body>
</html>

采纳吧，好用的话给个赞，也希望和大家一起讨论私聊，

html 当鼠标停留在图片上 显示另外一个div

html 当鼠标停留在图片上显示另外一个div