wie auf ein Element innerhalb Element html beeinflussen

Question

i beeinflussen die Sichtbarkeit einer Spanne auf schweben zu machen versuche , wenn ich über das img der sqaure schweben muss

<div class="headar_top"> 
     <a href=""><img id="timg"src="images/user.png"/></a> 
     <a href="#sitemap"><img id="timg"src="images/sitemap.png"/></a> 
     <span id="Square"> 
      <a href=""><button type="button" class="SquareButt">Log In</button></a> 
      <a href=""><button type="button" class="SquareButt">Sign Up</button></a> 
     </span> 
    </div> 

#timg:hover > #Square{ 
    visibility:visible; 
} 
#Square{ 
    margin-top:50px; 
    height:80px; 
    width:100px; 
    background-color:#f3f603; 
    float:right; 
    margin-right:-145px; 
    visibility:hidden; 

} 

sichtbar sein, aber ich kann immer noch nicht Nehmen Sie die Änderungen vor.

Answer 1

#square ist kein Kind von #timg, also die direkten Kinder Wähler > kann nicht funktionieren, wie man erwarten könnte:

<a href="" id="timg"><img src="images/user.png"/></a> 
<a href="#sitemap"><img id="timg"src="images/sitemap.png"/></a> 
<span id="Square"> 
    <button type="button" class="SquareButt">Log In</button> 
    <button type="button" class="SquareButt">Sign Up</button> 
</span> 

und ändern Sie die Art, wie so

stattdessen die id an die Mutter Link bewegen

#timg:hover ~ #Square { ... } 

Hinweis: ein Knopfelement kann nicht in einen Link

Answer 2

Sie sh eingeschlossen werden ould been #timg:hover ~ #Square { ... } Checkout dies.

#timg:hover ~#Square { 
 
    display:block; 
 
} 
 
#Square{ 
 
    margin-top:50px; 
 
    height:80px; 
 
    width:100px; 
 
    background-color:#f3f603; 
 
    float:right; 
 
    margin-right:145px; 
 
    display:none; 
 
}

<a href="" id="timg"><img src="images/user.png"/></a> 
 
<a href="#sitemap"><img id="timg"src="images/sitemap.png"/></a> 
 
<span id="Square"> 
 
    <button type="button" class="SquareButt">Log In</button> 
 
    <button type="button" class="SquareButt">Sign Up</button> 
 
</span>

Answer 3

.container { 
 
    position: relative; 
 
    float: left; 
 
} 
 

 
.container span { 
 
     display:none; 
 
    } 
 

 
.container:hover span { 
 
    display:block; 
 
}

<div class="container"> 
 
    <img id="timg"src="images/user.png"/> 
 
    <span> 
 
<a href=""><button type="button" class="SquareButt">Log In</button></a> 
 
      <a href=""><button type="button" class="SquareButt">Sign Up</button></a> 
 
</span> 
 
</div>

Bitte verwenden Sie diesen Code, funktioniert perfekt.