堆栈内存溢出
  简体   繁体   English

CSS Hover 和显示内联块无法正常工作

[英]CSS Hover and Display Inline Block not working properly

 原文  2022-05-05 06:16:26  6   1    javascript/ jquery/ css/ arrays

问题描述

Problem is when I hover, the overlay affects all the items, i would like it to do one at a time, not all at once and also I can't get the display to show Inline-Block, items seem to be taking up the whole row, once it's fixe i know i will have to adjust the figcaption because ideally that would need to be centered under each image... anything helps.问题是当我 hover 时，叠加层会影响所有项目，我希望它一次只做一个，而不是一次完成，而且我无法让显示器显示内联块，项目似乎占用了整行，一旦它被修复，我知道我将不得不调整 figcaption，因为理想情况下，它需要在每个图像下居中……任何帮助。 THanks!谢谢！ 

 const productData = document.querySelector('.wrap'); const productsOne = [{ Name: "Almonds", id: 1, src: "https://happywellbox.com/wp-content/uploads/2022/04/HAPPY-hellbox-01.png", href: "https://happywellbox.com/wp-content/uploads/2022/04/HAPPY-hellbox-01.png" }, { Name: "Kit Kat", id: 2, src: "https://happywellbox.com/wp-content/uploads/2022/04/HAPPY-hellbox-01.png", href: "https://happywellbox.com/wp-content/uploads/2022/04/HAPPY-hellbox-01.png" }, { Name: "PopCorn", id: 3, src: "https://happywellbox.com/wp-content/uploads/2022/04/HAPPY-hellbox-01.png", href: "https://happywellbox.com/wp-content/uploads/2022/04/HAPPY-hellbox-01.png" }, { Name: "Peanuts", id: 4, src: "https://happywellbox.com/wp-content/uploads/2022/04/HAPPY-hellbox-01.png", href: "https://happywellbox.com/wp-content/uploads/2022/04/HAPPY-hellbox-01.png" }, { Name: "Oreos", id: 5, src: "https://happywellbox.com/wp-content/uploads/2022/04/HAPPY-hellbox-01.png", href: "https://happywellbox.com/wp-content/uploads/2022/04/HAPPY-hellbox-01.png" }, ] document.getElementById('productspage1').innerHTML = productsOne.map(products => ` <div id="${products.id}"> <a href="${products.href}"> <img src="${products.src}" width="260" height="195"> <div class="text">${products.Name}</div> </a> <br> <center> <figcaption> <center> <label class="switch"> <input type="checkbox"name="${products.id}"class="single-checkbox"> <span class="slider round"> </span> </label> </center> </figcaption> </center> </div> ` ).join('<br><br>')
 figcaption { left: 200%; }.wrap *{ display: inline-block; max-height: 195px; max-width: 260px; position: relative; background: #fff; }.text { background: rgba(0,0,0,0.8); color: #fff; transition: opacity.5s; opacity: 0; position: absolute; top: 0em; bottom: 0em; left: 0em; right: 0em; display: flex; justify-content: center; align-items: center; }.wrap div:hover.text { opacity: 1; } img { max-width: 100%; display: inline-block; } /* The switch - the box around the slider */.switch { position: relative; display: inline-block; width: 50px; height: 24px; } /* Hide default HTML checkbox */.switch input { opacity: 0; width: 0; height: 0; } /* The slider */.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; }.slider:before { position: absolute; content: ""; height: 17px; width: 17px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; } input:checked +.slider { background-color: #49ba14; } input:focus +.slider { box-shadow: 0 0 1px #2196F3; } input:checked +.slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); } /* Rounded sliders */.slider.round { border-radius: 34px; }.slider.round:before { border-radius: 50%; }
 <html> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <div class="wrap"> <div id="productspage1"> </div></div> </html>

1 个解决方案

解决方案1
 1 已采纳  2022-05-05 06:58:41

You are targetting every div which has the.wrap div as an ancestor.您的目标是每个以 the.wrap div 作为祖先的 div。

So this includes the oveerarching productspage1 div.所以这包括 overerarching productspage1 div。

This snippet is more specific in targeting those divs that have the.wrap div as grandparent.此代码段更具体地定位那些以 the.wrap div 作为祖父级的 div。 

 const productData = document.querySelector('.wrap'); const productsOne = [{ Name: "Almonds", id: 1, src: "https://happywellbox.com/wp-content/uploads/2022/04/HAPPY-hellbox-01.png", href: "https://happywellbox.com/wp-content/uploads/2022/04/HAPPY-hellbox-01.png" }, { Name: "Kit Kat", id: 2, src: "https://happywellbox.com/wp-content/uploads/2022/04/HAPPY-hellbox-01.png", href: "https://happywellbox.com/wp-content/uploads/2022/04/HAPPY-hellbox-01.png" }, { Name: "PopCorn", id: 3, src: "https://happywellbox.com/wp-content/uploads/2022/04/HAPPY-hellbox-01.png", href: "https://happywellbox.com/wp-content/uploads/2022/04/HAPPY-hellbox-01.png" }, { Name: "Peanuts", id: 4, src: "https://happywellbox.com/wp-content/uploads/2022/04/HAPPY-hellbox-01.png", href: "https://happywellbox.com/wp-content/uploads/2022/04/HAPPY-hellbox-01.png" }, { Name: "Oreos", id: 5, src: "https://happywellbox.com/wp-content/uploads/2022/04/HAPPY-hellbox-01.png", href: "https://happywellbox.com/wp-content/uploads/2022/04/HAPPY-hellbox-01.png" }, ] document.getElementById('productspage1').innerHTML = productsOne.map(products => ` <div id="${products.id}"> <a href="${products.href}"> <img src="${products.src}" width="260" height="195"> <div class="text">${products.Name}</div> </a> <br> <center> <figcaption> <center> <label class="switch"> <input type="checkbox"name="${products.id}"class="single-checkbox"> <span class="slider round"> </span> </label> </center> </figcaption> </center> </div> ` ).join('<br><br>')
 figcaption { left: 200%; }.wrap * { display: inline-block; max-height: 195px; max-width: 260px; position: relative; background: #fff; }.text { background: rgba(0, 0, 0, 0.8); color: #fff; transition: opacity.5s; opacity: 0; position: absolute; top: 0em; bottom: 0em; left: 0em; right: 0em; display: flex; justify-content: center; align-items: center; }.wrap>div>div:hover.text { opacity: 1; } img { max-width: 100%; display: inline-block; } /* The switch - the box around the slider */.switch { position: relative; display: inline-block; width: 50px; height: 24px; } /* Hide default HTML checkbox */.switch input { opacity: 0; width: 0; height: 0; } /* The slider */.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; }.slider:before { position: absolute; content: ""; height: 17px; width: 17px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; } input:checked+.slider { background-color: #49ba14; } input:focus+.slider { box-shadow: 0 0 1px #2196F3; } input:checked+.slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); } /* Rounded sliders */.slider.round { border-radius: 34px; }.slider.round:before { border-radius: 50%; }
 <html> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <div class="wrap"> <div id="productspage1"> </div> </div> </html>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 CSS：令人惊讶地删除了没有处理子显示：内联块div - CSS : Amazingly strikethrough not working on child display:inline-block div CSS显示：内联不起作用 - css display: inline not working JS.style.display = “inline” 将在 CSS 中显示为“inline-block” - JS .style.display = “inline” Will display as “inline-block” in CSS <ul>显示内联块不起作用 - <ul> display inline-block not working jQuery：CSS显示块不起作用 - jQuery: CSS Display block not working css 属性“显示”无法正常工作 - css property “display” not working properly 设置内联样式时，CSS 悬停效果不起作用 - CSS Hover Effect not working when an inline style is set JQuery.css（“ display”，“ block”）仍以内联结尾 - JQuery.css(“display”, “block”) still ends up inline jQuery append（）与CSS的怪异互动display：inline-block - jquery append() weird interaction with css display:inline-block CSS显示内联块并用元素填充所有空间 - CSS display inline-block and fill all spaces with elements
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM