ARTICLE AD BOX
What I want to do is when you hover on <div class="computer"> the <div class="text"> will change its content. As you can see I've done so with the text box itself, now I want it to also happen when I hover on the computer.
<div class="compter"> <img src= "https://file.garden/aG3rdTNO_Dlar7-g/new%20site/landing/computer.png"/> </div> <div class="text"> <img src="https://file.garden/aG3rdTNO_Dlar7-g/new%20site/landing/welcome%20text%20box.png" width="318" height="185" id="text"> </div> .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; }Various things I've tried out and their results:
I've tried this with the comma and the plus sign also, and got nothing
.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; }Making the new content into it's own thing, also nothing
.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; }Closest thing I got is this
<div class="computer"> <a href="index.html"><img src="https://file.garden/aG3rdTNO_Dlar7-g/new%20site/landing/computer.png" id="home"></a> </div> <div class="welcome"> <img src="https://file.garden/aG3rdTNO_Dlar7-g/new%20site/landing/welcome%20text%20box.png" width="318" height="185" id="home"/> </div> #home:hover { width: 318px; height:185px; content: url("https://file.garden/aG3rdTNO_Dlar7-g/new%20site/landing/home%20text.png"); transition-delay:3s; }But that changed the computer's content, and I want to only change the text content.
