Der Inhalt auf der Seite bewegt sich weiter, wenn der Mauszeiger auf ein div gestellt wird

Ich versuche, Inhalte anzuzeigen, wenn die Maus über ein Foto schwebt. Es fällt mir jedoch schwer, dies zu tun, ohne den Rest des Inhalts auf der Seite unter den Bildern zu verschieben. Was sind einige mögliche Lösungen, um den Inhalt direkt unter den Top 3 Bildern bei Hover anzuzeigen, ohne margin-top: -22% zu verwenden?Der Inhalt auf der Seite bewegt sich weiter, wenn der Mauszeiger auf ein div gestellt wird

Beigefügt ist ein Link zu der Website: http://aswanson.net/ConnectWithTrainingHomePage/MyHomePage.html

<!Doctype html> 
    <html> 
    <head> 
    <title>Home Page</title> 
    <link rel="stylesheet" type="text/css" href="MyHomePage.css"> 
    </head> 
    <body> 
    <img class="cnetheader" src="cnetheader.png" alt="cnetheader" height="100%" width="100%"> 

    <img class="searchBar" src="searchBar.png" alt="cnetheader" height="100%" width="50%"> 

    <img class="eCommerce" src="eCommerce.png" alt="cnetheader" height="100%" width="92%"> 

    <img class="freelancer" src="freelancer.png" alt="cnetheader" height="100%" width="100%"> 

    <img class="photoHeader" src="photoHeader.png" alt="cnetheader" height="100%" width="100%"> 

     <img src="photos2.png" width="100%" height="100%" border="0" usemap="#map" /> 

     <map name="map"> 

    <div class="photo1"> 
     <area shape="rect" coords="63,13,451,260" href="https://www.google.com" /> 

     <div class="photo1-content"> 
      Only show when hovering 
     </div> 
    </div> 

<div class="photo2"> 
    <area shape="rect" coords="481,13,870,258" href="https://www.google.com" /> 
    <div class="photo2-content"> 
      Only show when hovering 
    </div> 
</div> 

<div class="photo3"> 
    <area shape="rect" coords="900,12,1290,258" href="https://www.google.com" /> 
    <div class="photo3-content"> 
     Only show when hovering 
    </div> 
</div> 

<div class="photo4"> 
    <area shape="rect" coords="60,300,450,545" href="https://www.google.com" /> 
    <div class="photo4-content"> 
     Only show when hovering 
    </div> 
</div> 

<div class="photo5"> 
    <area shape="rect" coords="483,301,870,545" href="https://www.google.com" /> 
    <div class="photo5-content"> 
     Only show when hovering 
    </div> 
</div> 

<div class="photo6"> 
    <area shape="rect" coords="899,300,1288,545" href="https://www.google.com" /> 
    <div class="photo6-content"> 
     Only show when hovering 
    </div> 
</div> 
</map> 

<img class="enterprise" src="enterprise.png" alt="cnetheader" height="100%" width="100%"> 

</body> 
    </html> 


.eCommerce{ 
    margin-left: 7%; 
} 

.photo1-content{ 
    display: none; 
} 

.photo1:hover .photo1-content{ 
    display: block; 
    margin-top: -22%; 
    margin-left: 13%; 
} 

.photo2-content{ 
    display: none; 
} 

.photo2:hover .photo2-content{ 
    display: block; 
    margin-top: -22%; 
    margin-left: 44%; 
} 

.photo3-content{ 
    display: none; 
} 

.photo3:hover .photo3-content{ 
    display: block; 
    margin-top: -22%; 
    margin-left: 75%; 
} 

.photo4-content{ 
    display: none; 
} 

.photo4:hover .photo4-content{ 
    display: block; 
    margin-top: -1%; 
    margin-left: 13%; 
} 

.photo5-content{ 
    display: none; 
} 

.photo5:hover .photo5-content{ 
    display: block; 
    margin-top: -1%; 
    margin-left: 44%; 
} 

.photo6-content{ 
    display: none; 
} 

.photo6:hover .photo6-content{ 
    display: block; 
    margin-top: -1%; 
    margin-left: 75%; 
} 

.enterprise{ 
    position: static; 
}

Quelle

2016-05-17 DeemStarr

eine Kombination aus position:absolute und top,bottom,left,right Eigenschaften verwenden

Quelle

2016-05-17 04:00:04 madalinivascu

Der Inhalt auf der Seite bewegt sich weiter, wenn der Mauszeiger auf ein div gestellt wird

Antwort

Verwandte Themen