Html 当我将鼠标悬停在第二个_Html_Css

Html 当我将鼠标悬停在第二个

html css

Html 当我将鼠标悬停在第二个,html,css,Html,Css,在我的代码中，我有一个主代码和一个较小的代码。当我悬停在干管上时，它会下降，小的会出现。但是，然后鼠标停在小的上面，主的又回来了这里是一个图形表示： --------- | | | main | | div | ---------- 将鼠标悬停在干管上后：以下是我的HTML代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org

在我的代码中，我有一个主代码和一个较小的代码。当我悬停在干管上时，它会下降，小的会出现。但是，然后鼠标停在小的上面，主的又回来了

这里是一个图形表示：

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

好的，css3有同级选择器~，这有助于实现这一点

试试这个：

jsfiddle：

请注意浏览器支持：

以下是一些细节：

我只看了你的问题，没有其他的，我读这个问题很困惑。我想这只是因为时间很早。你为什么不提供一个JSFIDLE呢？到处都是谜语……哈哈。。但是这里的问题是什么？

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

#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; }