我該怎么做 <DIV> 一秒鍾以下可見 <DIV> 當我將鼠標懸停在第二個 <DIV>

Question

在我的代碼中，我有一個主<div>和一個較小的。 當我將鼠標懸停在主<div>它會下降，而較小的一個會出現。 但是，鼠標最終停在小的<div>上方，而主<div>再次出現。

這里是圖形表示：

---------
|        |
|   main |
|   div  |
----------

將鼠標懸停在主<div> ：

 -----
|  sub|
|  div|
 -----

-----------
|   main |
|   div  |
|        |
----------

這是我的HTML代碼：

    <!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>

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>

問題描述

1 個解決方案

解決方案1
0 2014-01-15 13:44:36

我該怎么做 <DIV> 一秒鍾以下可見 <DIV> 當我將鼠標懸停在第二個 <DIV>

問題描述

1 個解決方案

解決方案1 0 2014-01-15 13:44:36

解決方案1
0 2014-01-15 13:44:36