Question

谁能告诉我为什么这不起作用？我希望当我将鼠标悬停在方框上时，它会打开（从10px宽到300px宽）并显示图片（在框内）。

框和内容独立工作，但当我将它们放在一起时，它们就会发生冲突。

 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Untitled 1</title>

 <style type="text/css">
 .BOX {
     width: 10px;
     height: 600px;
     background: rgba(55, 55, 55, .8);
     -webkit-transition-property: width; /* Safari */
     -webkit-transition-duration: 4s; /* Safari */
     -webkit-transition-delay: 2s; /* Safari */
     transition-property: width;
     transition-duration: 2s;
     transition-delay: 0s;
     position: absolute;
     z-index:-1;
 }

 .PICTURE {
     position: absolute;
     z-index:1;
     top: 100px;
     left:100px;
        visibility:hidden;
 }

  .BOX:hover  + .PICTURE {
     visibility:visible;
        width: 300px;       
 }

 </style>
 </head>
 <body>

 <div class="BOX"></div>
 <div class="PICTURE" style="width: 99px; height: 150px;"><img 
 src="pic.jpg"></div>
 </body>
 </html>

Answer 1

尝试添加一些jquery，它更容易。也许这会对你有所帮助：jsfiddle.net/sr6Lsour /

Answer 2

.BOX:hover  + .PICTURE {

仅适用于图片，您需要使用

.BOX:hover,.BOX:hover  + .PICTURE {

+

上的

more information

纯CSS：多个悬停功能不起作用

2 个答案: