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> Hola a todos, estoy trabajando en un proyecto en el que obtengo datos de una API y los inserto en el DOM. Cada pieza de datos tiene un elemento .hidden que está oculto de manera predeterminada usando display: none . Quiero poder desplazarme sobre cada elemento .post y hacer que .hidden en ese elemento se vuelva visible. Actualmente, cuando paso el mouse sobre un elemento .post , el .hidden en el siguiente elemento de publicación se vuelve visible, no el del elemento actual.
Está utilizando el combinador de hermanos adyacentes de CSS ( + ). En su lugar, use el combinador de niños ( > ), así:
.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 significa: el siguiente .post .hidden . Así que .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>