When hovering over a link, I want to highlight a specific picture and blur the rest. Here's my HTML code:
<body>
<div id="back">
<div id="one"></div>
<div id="two"></div>
</div>
<div id="menu">
<a href="one.html" id="link1">one</a>
<a href="two.html" id="link2">two</a>
</div>
</body>
Here's the corresponding CSS code:
#Back{
position: absolue;
background-image: url(images/fond.png);
width: 960px;
height: 600px;
margin: 0 auto;
}
#one{
background-image: url(images/formation.png);
width: 960px;
height: 600px;
z-index:1;
}
#two{
background-image: url(images/experiences.png);
width: 960px;
height: 600px;
z-index:2;
margin-top:-600px;
}
I've attempted the following in CSS:
#link1:hover #one{
display:none;
}
And also tried a JavaScript solution like this:
function over(id){
if(document.getElementById(id)){
var objet = document.getElementById(id);
objet.style.display = "none";
}
}
Unfortunately, neither approach seems to be working as expected. Any guidance or solutions would be greatly appreciated!