1
Also habe ich eine Liste eingerichtet, so dass wenn ich über die verschiedenen Elemente schwebe, wird das Bild rechts von den Elementen geändert. Ich möchte Text mit dem Bild gehen, so dass ich das in einem div unten mögen würde. Gibt es einen Weg mit CSS, um es so zu machen, wenn ich über ein Element in der Liste schwebe, ändert sich der Text in der div? Normalerweise versuche ich, diese Dinge selbst herauszufinden, aber ich habe eine Weile gesucht und kann keine Lösung finden.Ändere den Text in einem Div, wenn er über einem Listenelement schwebte
HTML:
<div class="relative">
<ul>
<li>
<a href="#">Arms</a>
<img src="img/arms.jpg" alt="">
<div class="absolute">TEXT TEST 1</div>
</li>
<li>
<a href="#">Back</a>
<img src="img/back.jpg" alt="">
<div class="absolute">TEXT TEST 2</div>
</li>
<li>
<a href="#">Head</a>
<img src="img/head.jpg" alt="">
</li>
<li>
<a href="#">Feet</a>
<img src="img/feet.jpg" alt="">
</li>
<li>
<a href="#">Legs</a>
<img src="img/legs.jpg" alt="">
</li>
<li>
<a href="#">Chair</a>
<img src="img/chair.jpg" alt="">
</li>
<li>
<a href="#">Desk</a>
<img src="img/desk.jpg" alt="">
</li>
</ul>
</div>
und hier ist die relative CSS:
ul {
background-image: url('../img/bg.jpg');
background-repeat: no-repeat;
background-origin: border-box;
background-position:right top;
border-top: 1px solid #444;
border-bottom: 1px solid #444;
border-right: 1px solid #444;
display: inline-block;
height: 700px;
position: relative;
width: 800px;
list-style:none;
padding-left:0;
}
li {
font: bold 16px/100px sans-serif;
height: 100px;
}
a {
border-right: 1px solid #444;
border-top: 1px solid #444;
border-left: 1px solid #444;
color: black;
display: block;
text-align: center;
text-decoration: none;
width: 99px;
}
a:hover {
background: gray;
color: #fff;
}
div.relative {
position: relative;
width: 700;
height: 900;
}
div.absolute {
position: absolute;
top: 700px;
width: 800px;
height: 100px;
border: 1px solid #444;
}
h3{
margin-left:200px;
margin-top:500px;
}
img {
display: none;
height: 700;
position: absolute;
right: 0;
top: 0;
width: 600px;
background-color:red;
}
a:hover + img,
img:hover {
display: block;
}
danke das funktioniert super! –