来哥201x 发表于 2019-3-19 17:47:03

我想让一张图片先不显示（display:none）然后把鼠标放在一个位置时图片又能显示了

.picture2{position:absolute;bottom:40px;left:0px;}
                     .hidden{width:300px;
                                  height:200px;
                                  position:absolute;top:250px;left:320px;
                                  display:none;}
                     .hidden:hover{display:block;}   

这是这部分的代码，在网页上当我把鼠标放在div上时，图片也不显示
求大佬相助{:9_228:}

ba21 发表于 2019-3-19 18:45:23

要上代码就上全，HTML ，css一个不能少。

来哥201x 发表于 2019-3-19 18:51:41

ba21 发表于 2019-3-19 18:45
要上代码就上全，HTML ，css一个不能少。

怕太多了看着费劲。。不好意思，小白不了解，这是全部代码
<!DOCTYPE html>
<html>
         <head>
                   <meta charset="utf-8">
                   <meta name="viewport" content="width=device-width, initial-scale=1.0">
                   <title>
                   201700408094 CA1
                   </title>
                   <link href="image/favicon.ico" rel="icon" type="image/x-icon">
                   <style type="text/css">
                   body{background-image:url("image/background.jpg");
                           background-position:0px 0px;
                           background-size:100%;}
                   .h1{text-align:center;
                         font-family:"STHupo","Microsoft YaHei";
                         color:black;
                         font-size:400%;}
                   .p1{font-weight:bold;
                         font-size:180%;
                         position:absolute;top:150px;left:0px;
                         font-family:"Microsoft YaHei";}
                  .picture1{position:absolute;top:250px;left:160px;}
                  .p2{font-family:"Microsoft YaHei";
                        font-size:150%;
                        color:#cc0099;
                        position:absolute;top:390px;left:180px;}
                     .p3{font-family:"Microsoft YaHei";
                           font-size:150%;
                           color:#cc0099;
                           position:absolute;top:136px;left:100px;}
                     .picture2{position:absolute;bottom:40px;left:0px;}
                     .hidden{width:300px;
                                  height:200px;
                                  position:absolute;top:250px;left:320px;
                                  display:none;}
                     .hidden:hover{display:block;}                     
                   </style>
         </head>
         <body>
                  <h1 class="h1">get to know me</h1>
                  <p class="p1">My name is Jialai Wu<br><br><br>
                                              I'm a boy<br><br><br>
                                              I'm 20<br><br><br>
                                              I don't talk much behind strangers</p>
                  <img alt="That's so bad" src="image/little boy.jpg" height=20% width=10% class="picture1">
                  <p class="p2">find more<br>(put the mouse on the right of the picture)</p>
                  <div class="hidden">
                  <img alt="That's so bad" src="image/fat boy.png" height=86% width=100% class="picture2">
                  <p class="p3">&nbsp&nbsp&nbsp&nbspI'm very fat...</p>
                  </div>
         </body>
</html>

ba21 发表于 2019-3-19 19:20:01

来哥201x 发表于 2019-3-19 18:51
怕太多了看着费劲。。不好意思，小白不了解，这是全部代码




老实说想现很丰满。这样你是永远不可能实现的，块都隐藏了还怎么响应你的over事件。
方法1.用js动态修改样试。先嵌套个主的div 用于永久显示,响应js； 再内部div加上个ID好让js找到并修改DIV的class="hidden"， 鼠标经过改为class="hidden_over"
方法2.参考https://blog.csdn.net/qingbaicai/article/details/52200569

来哥201x 发表于 2019-3-19 20:54:34

ba21 发表于 2019-3-19 19:20
老实说想现很丰满。这样你是永远不可能实现的，块都隐藏了还怎么响应你的over事件。
方法1.用js动态修改 ...

谢谢，问题解决了，太感谢了{:5_101:}
页: [1]
查看完整版本: 我想让一张图片先不显示（display:none）然后把鼠标放在一个位置时图片又能显示了