Как сделать, чтобы при наведении курсора изображения 2 ИЛИ изображения 1 менялось ТОЛЬКО содержимое изображения 1 ⇐ Html

[Anonymous]

Я хочу, чтобы при наведении курсора на менял свое содержимое. Как вы можете видеть, я сделал это с самим текстовым полем, и теперь я хочу, чтобы это также происходило при наведении курсора на компьютер.

Код: Выделить всё

[img] [/img]

[img]https://file.garden/aG3rdTNO_Dlar7-g/new%20site/landing/welcome%20text%20box.png[/img]

Код: Выделить всё

.computer{
position:absolute;
width:350px;
height:419px;
left:1535px;
top:660px;
}

.text{
position:absolute;
left:1570px;
top:455px;
}

.text:hover{
width: 318px;
height:185px;
content: url("https://file.garden/aG3rdTNO_Dlar7-g/new%20site/landing/home%20text.png");
transition-delay:3s;
}

Различные вещи, которые я пробовал, и их результаты:
Я пробовал это также с запятой и знаком плюс, но ничего не получил

Код: Выделить всё

.welcome:hover .computer:hover{
width: 318px;
height:185px;
content: url("https://file.garden/aG3rdTNO_Dlar7-g/new%20site/landing/home%20text.png");
transition-delay:3s;
}

Сделать новый контент самостоятельным, тоже ничего

Код: Выделить всё

.text{
position:absolute;
left:1570px;
top:455px;
z-index: -1
}

.home{
display:none;
}

.computer:hover .home{
display:block;
z-index: 1;
transition-delay:2s;
left:1570px;
top:455px;
position:absolute;
}

Ближе всего получилось вот это

Код: Выделить всё

[url=index.html]
[img]https://file.garden/aG3rdTNO_Dlar7-g/new%20site/landing/computer.png[/img]
[/url]

[img]https://file.garden/aG3rdTNO_Dlar7-g/new%20site/landing/welcome%20text%20box.png[/img]

#home:hover {
width: 318px;
height:185px;
content: url("https://file.garden/aG3rdTNO_Dlar7-g/new%20site/landing/home%20text.png");
transition-delay:3s;
}

Но это изменило содержимое компьютера, и я хочу изменить только текстовое содержимое.

Подробнее здесь: https://stackoverflow.com/questions/798 ... -1-content