const fetchData = async() => {
const res = await fetch('https://jsonplaceholder.typicode.com/posts')
const data = await res.json()
return data
}
(async() => {
const container = document.querySelector('.container')
const data = await fetchData()
data.forEach(post => {
container.insertAdjacentHTML(
'afterend',
`<div class="post">
<p>${post.title}</p>
<p class="hidden">hover</p>
</div>`
)
})
})().post {
border: 1px solid #000;
margin-bottom: 15px;
}
.hidden {
display: none;
}
.post:hover+.post .hidden {
display: block;
}<div class="container"></div>Hello everyone, I am working on a project where I get data from an API and insert it into the DOM. Each piece of data has a .hidden element that is by default hidden using display: none. I want to be able to hover on each .post element and have .hidden in that element become visible. Currently, when I hover on a .post element, the .hidden in the next post element becomes visible not the one in the current element.
You're using the CSS adjacent sibling combinator (+). Instead, use the child combinator (>), like so:
.post:hover > .hidden {
display: block;
}
.hidden {
display: none;
}
.post:hover > .hidden {
display: initial;
}<p class="post">
Hello, world! <span class="hidden">Hover text!</span>
</p>
<div class="post">
<p>Lorem ipsum</p>
<p class="hidden">Sample text!</p>
</div>+.post .hidden means: the next .post .hidden. So make it .post:hover > .hidden
const fetchData = async() => {
const res = await fetch('https://jsonplaceholder.typicode.com/posts')
const data = await res.json()
return data;
};
(async() => {
const container = document.querySelector('.container')
const data = await fetchData()
data.forEach(post => {
container.insertAdjacentHTML(
'afterend',
`<div class="post">
<p>${post.title}</p>
<p class="hidden">hover</p>
</div>`
)
})
})();body {
font: 1rem/1.3rem normal verdana, sans-serif;
margin: 2rem;
}
.post {
border: 1px solid #000;
margin-bottom: 15px;
cursor: pointer;
}
.post p {
margin: 0.1rem 0.4rem;
}
.hidden {
display: none;
}
/*Demo*/
.post:hover+.post .hidden {
display: block;
}
.post:hover+.post .hidden:before {
color: red;
font-weight: bold;
content: '.post:hover+.post .hidden ';
}
.post:hover>.hidden {
display: block;
}
.post:hover>.hidden:before {
color: red;
font-weight: bold;
content: '.post:hover>.hidden ';
}<div class="container"></div>