При наведении элемент массива должен раскрыться, показав элементы, помеченные классом "hide", не могу реализовать. Пробовала через стили :hover, и через отдельные функции, не работает.
<body>
<ul class="products"></ul>
<script src="scripts.js"></script>
</body>
body{
font-family: 'Courier New', Courier, monospace;
margin: 20px;
}
.item{
border: 3px solid rgb(42, 69, 165);
color: rgb(18, 36, 100);
background-color: rgb(175, 183, 214);
border-radius: 20px;
width: calc(100% - 40%);
margin: 20px;
padding: 0 15px 0 15px;
text-align: center;
}
.hide{
visibility: hidden;
width: 0px;
height: 0px;
}
.hide:hover{//1 способ не работает
visibility: visible;
width: max-content;
height: max-content;
}
div{
margin: 10px;
}
p{
margin: 0px;
padding: 0px;
text-align: left;
}
ul {
list-style-type: none;
}
async function getResponse() {
let response = await fetch('https://dummyjson.com/products')
let jsonList = await response.json()
let list = document.querySelector('.products')
let key
let elements = jsonList.products
elements = elements.splice(0, 3)
for (key in elements) {
//console.log(elements[key])
list.innerHTML +=
`<li class="item">
<div>
<h5>${elements[key].title}</h5>
<img class="hide" src="${elements[key].images[key]}" alt="${elements[key].description}" width="200"></img>
<p class="hide">brand: ${elements[key].brand}</p>
<p class="hide">category: ${elements[key].category}</p>
<p class="hide">${elements[key].description}</p>
<p class="hide">discount percentage: ${elements[key].discountPercentage} %</p>
<p class="hide">price: ${elements[key].price} usd</p>
<p class="hide">rating: ${elements[key].rating}</p>
<p class="hide">stock: ${elements[key].stock}</p>
</div>
</li>`
}
}
window.onload = function () { // 2й способ не работает
let list = document.getElementsByClassName('item')
let hide = document.getElementsByClassName('hide')
list.onmouseover = function() {mouseOver()};
list.onmouseout = function() {mouseOut()};
function mouseOver() {
hide.style.visibility = 'visible'
hide.width = 'max-content'
hide.height = 'max-content'
}
function mouseOut() {
hide.style.visibility = 'hidden'
hide.width = '0'
hide.height = '0'
}
}
getResponse()
