1
Итак, у меня есть список, созданный таким образом, чтобы при наведении курсора на разные элементы он изменил изображение справа от элементов. Я хочу, чтобы текст шел вместе с изображением, поэтому мне хотелось бы, чтобы в div ниже. Есть ли способ с css, чтобы сделать это, когда я навещу над элементом в списке, он изменит текст в div? Обычно я пытаюсь понять эти вещи самостоятельно, но я искал какое-то время и не могу найти решение.Измените текст в div при наведении курсора на элемент списка
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>
и здесь относительное 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;
}
спасибо, что отлично работает! –