Question

在我的代码中，我有一个主<div>和一个较小的主<div>。当我将主<div>悬停时，它会下降，而较小的一个会出现。但是，鼠标会在小<div>上结束，主--------- | | | main | | div | ----------会重新出现。

这是一个图形表示：

<div>

将鼠标悬停在主----- | sub| | div| ----- ----------- | main | | div | | | ----------上方之后：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>Untitled Document</title>
   <style>

     #Target
      {
        background-color: red;
         opacity:.1;
     margin:20px;
     padding:0;
     float:left;
     z-index:1;
     position:absolute;
       }
     #Hovered
      {
    background-color:#0F0;
    z-index:0;
    float:left;
          width:330;
        opacity:1;
        height:200px;
         background-image:url(phpcenter/logo.PNG);
        background-repeat:no-repeat;
        transition:all 1s;  
        z-index:2;
        width:330px;
        opacity:.1;
       }
    #Hovered:hover
    {
        background-position:0 500%; 
    }

    #Target:hover, #Hovered:hover + #Target
       {
        opacity:1;
     transition:1s;
       }
    </style>
    </head>

    <body>
    <div id="Hovered">Hover me</div>
    <div id="Target"><a href="#">about me</a><br><a href="#">resume</a></div>
    </body>
    </html>

这是我的HTML代码：

{{1}}

Answer 1

好的，所以css3有兄弟姐妹选择器~，这可以帮助你做到这一点。

试试这个：

#Hovered{background-color:#0F0; height:80px; width:330px; width:330px; z-index:0;}
#Target{background-color:red; margin:20px; opacity:.1; padding:0; transition:all 1s; position:absolute; top:15px; width:290px; z-index:1}
#Hovered:hover ~ #Target{opacity:1; }

jsfiddle：http://jsfiddle.net/e7L44/1/

只要小心浏览器支持。：）

以下是有关它的一些细节：http://reference.sitepoint.com/css/generalsiblingselector

当我将鼠标悬停在第二个<div> </div> </div> </div>上时，如何在第二个<div>下方显示一个<div>

1 个答案: