I have two div in one a. I want link to only first div.
this is code:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<title>Document</title>
</head>
<body>
<a href="#">
<div id="div1"></div>
<div id="div1info"></div>
</a>
</body>
</html>
CSS
#div1 {
width: 15em;
height: 25em;
background-color: rgb(214, 214, 214);
border-radius: 5px;
position: fixed;
}
#div1info {
width: 30em;
height: 25em;
background-color: rgb(0, 0, 0);
border-radius: 5px;
opacity: 0;
margin-left: 16em;
transition: 1s;
}
#div1:hover + #div1info {
width: 30em;
height: 25em;
background-color: rgb(10, 9, 9);
border-radius: 5px;
opacity: 100%;
margin-left: 16em;
transition: 1s;
}
I try change this:
<a href="#">
<div id="div1"></div>
<div id="div1info"></div>
</a>
To this
<a href="#">
<div id="div1"></div>
</a>
<div id="div1info"></div>
but then CSS didn’t work.
How I can link only first div. with any language, CSS, jQuery, JS…
If there no way to do this without changing HTML structure, change it lightly.
>Solution :
The CSS "didn’t work" because when you change the markup structure then you also need to change any style selectors which depend on that markup structure. In this case specifically this one:
#div1:hover + #div1info
The #div1info is no longer a sibling of #div1. But is is a sibling of the surrounding a:
a:hover + #div1info
For example:
#div1 {
width: 15em;
height: 25em;
background-color: rgb(214, 214, 214);
border-radius: 5px;
position: fixed;
}
#div1info {
width: 30em;
height: 25em;
background-color: rgb(0, 0, 0);
border-radius: 5px;
opacity: 0;
margin-left: 16em;
transition: 1s;
}
a:hover + #div1info {
width: 30em;
height: 25em;
background-color: rgb(10, 9, 9);
border-radius: 5px;
opacity: 100%;
margin-left: 16em;
transition: 1s;
}<a href="#">
<div id="div1"></div>
</a>
<div id="div1info"></div>