期望的結果：懸停時，我的 ul 串列中的一個元素應該彈出，而其他元素變得不可見。
結果：懸停時，所有元素都變得不可見。
ul li {
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
font-size: 20px;
color: white;
background-color: rgb(207, 178, 183);
}
ul li a {
padding: 20px 30px;
background-color: blue;
z-index: 1;
}
ul li a:hover {
transform: scale(1.5);
background-color: purple;
z-index: 1000;
}
ul:hover li a {
opacity: 0;
}<ul>
<li><a>Home</a></li>
<li><a>Home</a></li>
<li><a>Home</a></li>
<li><a>Home</a></li>
</ul>uj5u.com熱心網友回復：
您沒有使當前懸停的元素不透明：
ul li a:hover {
opacity: 1;
}
ul li {
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
font-size: 20px;
color: white;
background-color: rgb(207, 178, 183);
}
ul li a {
padding: 20px 30px;
background-color: blue;
z-index: 1;
}
ul:hover li a {
opacity: 0;
}
ul li a:hover {
transform: scale(1.5);
background-color: purple;
z-index: 1000;
opacity: 1;
}<ul>
<li><a>Home</a></li>
<li><a>Home</a></li>
<li><a>Home</a></li>
<li><a>Home</a></li>
</ul>uj5u.com熱心網友回復：
更新您的代碼，如下所示：
ul li {
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
font-size: 20px;
color: white;
background-color: rgb(207, 178, 183);
}
ul {
pointer-events: none; /* added */
}
ul li a {
padding: 20px 30px;
background-color: blue;
pointer-events: initial; /* added */
}
ul:hover li a {
opacity: 0;
}
ul li a:hover {
transform: scale(1.5);
background-color: purple;
opacity: 1; /* added */
}<ul>
<li><a>Home</a></li>
<li><a>Home</a></li>
<li><a>Home</a></li>
<li><a>Home</a></li>
</ul>uj5u.com熱心網友回復：
使用 javascript 你可以更干凈一些......注意我沒有轉換為可見；不知道你想如何在你的設計中解決這個問題。
/* note: this script goes at the bottom of page or under the id="menu"
or else it must be loaded after the page loads */
elements = document.querySelectorAll('#menu a')
elements.forEach(function(item) {
item.onmouseover = function() {
items = document.querySelectorAll('#menu a:not(:hover)')
items.forEach(function(item) {item.removeAttribute("visible")})
}
})
elements.forEach(function(item) {
item.onmouseout = function() {
elements.forEach(function(item) {item.setAttribute("visible","true")})
}
})#menu li{
display:flex;
justify-content: center;
align-items: center;
padding: 20px;
font-size: 20px;
color: white;
background-color: rgb(207, 178, 183);
}
#menu li a{
padding:20px 30px;
background-color: blue;
z-index:1;
}
#menu li a:hover{
transform: scale(1.5);
background-color:purple;
z-index:1000;
}
#menu a:not([visible]) {
opacity:0;
transition: 1s;
}
<body>
<ul id="menu">
<li><a visible>Home</a></li>
<li><a visible>Home</a></li>
<li><a visible>Home</a></li>
<li><a visible>Home</a></li>
</ul> 轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/465724.html