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

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

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

.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上时，图片也不显示
求大佬相助

最佳答案

月排行榜 / 总排行榜

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

跳转到最佳答案楼层

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动态修改 ...

谢谢，问题解决了，太感谢了

账号		自动登录	找回密码
密码			立即注册

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

马上注册，结交更多好友，享用更多功能^_^

评分

浏览过的版块