是否可以為影像制作懸停效果？我怎么可能讓它發生？代碼示例：
HTML：
<div class="side-bar">
<h3 class="nav-header">Saas Kit</h3>
<ul class="navUl">
<li class="side1"><b>Sierra Ferguson</b></li>
<span class="side2">[email protected]</span>
<span id="side1-2"><img src="./imgs/image 2.png" alt=""></span>
<li class="navDash"><img class="dashImg" src="./imgs/Vector.png" alt=""> Dashboard</li>
<li class="navLi"><img src="./imgs/Tasks.png" alt="tasks"></li>
<li class="navLi"><img src="./imgs/Email.png" alt="email"></li>
<li class="navLi"><img src="./imgs/Contacts.png" alt="contacts"></li>
<li class="navLi"><img src="./imgs/Chat.png" alt=""></li>
<li class="navLi"><img src="./imgs/Deals.png" alt=""></li>
<!-- <li >toggle</li> -->
<li></li>
</ul>
CSS：
.navLi:hover{
background: #16251217;
color: #90A0B7;
}
.navLi img:hover{
background: #16251217;
color: #90A0B7;
}
我什至試過：
img:hover{
background: X;
color: X
}
我能做些什么？
完整的 HTML 代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ITC-SaaS Kit</title>
<link rel="stylesheet" href="/new.css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open Sans&display=swap" rel="stylesheet">
</head>
<body>
<div class="side-bar">
<h3 class="nav-header">Saas Kit</h3>
<ul class="navUl">
<li class="side1"><b>Sierra Ferguson</b></li>
<span class="side2">[email protected]</span>
<span id="side1-2"><img src="./imgs/image 2.png" alt=""></span>
<li class="navDash"><img class="dashImg" src="./imgs/Vector.png" alt=""> Dashboard</li>
<li class="navLi"><img src="./imgs/Tasks.png" alt="tasks"></li>
<li class="navLi"><img src="./imgs/Email.png" alt="email"></li>
<li class="navLi"><img src="./imgs/Contacts.png" alt="contacts"></li>
<li class="navLi"><img src="./imgs/Chat.png" alt=""></li>
<li class="navLi"><img src="./imgs/Deals.png" alt=""></li>
<!-- <li >toggle</li> -->
<li></li>
</ul>
</div>
<div class="main-content">
<div class="nav">asdasd</div>
<div class="tasks">
<div class="left-side">
<div class="top-left">
<ul class="date">
<li>Monday</li>
<li>monday</li>
<li>monday</li>
<li>monday</li>
<li>monday</li>
<li>monday</li>
<li>monday</li>
</ul>
</div>
<div class="bottom-left">adasd</div>
</div>
<div class="right-side">asda</div>
</div>
</div>
</body>
</html>
uj5u.com熱心網友回復：
嘗試這個
img:hover {
border: 3px solid black;
}
uj5u.com熱心網友回復：
詳細說明 j08691 的評論，事情是，對于一個<img>元素，color和background屬性對其沒有任何影響，這是因為該<img>元素只顯示給它的影像。因此，即使這些屬性<img>在懸停時應用到標簽上，它們也不會對其產生影響。
<img>影響標簽的其他屬性height將顯示其對懸停的影響。
根據你想要的，這里的代碼會給你想要的結果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ITC-SaaS Kit</title>
<link rel="stylesheet" href="/new.css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open Sans&display=swap" rel="stylesheet">
<style type="text/css">
.navLi:hover{
background: #16251217;
color: #90A0B7;
}
/*On hover, the image will dissappear and the span will take the required color.*/
.navLi img:hover {opacity: 0;}
.navLi span:hover {background-color: blue; display:inline-block;}
</style>
</head>
<body>
<div class="side-bar">
<h3 class="nav-header">Saas Kit</h3>
<ul class="navUl">
<li class="side1"><b>Sierra Ferguson</b></li>
<span class="side2">[email protected]</span>
<span id="side1-2"><img src="" alt=""></span>
<li class="navDash"><img class="dashImg" src="./imgs/Vector.png" alt=""> Dashboard</li>
<!--Put all <img> tags inside a <span> tag.-->
<li class="navLi"><span><img src="./imgs/Tasks.png" alt="tasks"></span></li>
<li class="navLi"><span><img src="./imgs/Email.png" alt="email"></span></li>
<li class="navLi"><span><img src="./imgs/Contacts.png" alt="contacts"></div></li>
<li class="navLi"><span><img src="./imgs/Chat.png" alt=""></span></li>
<li class="navLi"><span><img src="./imgs/Deals.png" alt=""></span></li>
<!-- <li >toggle</li> -->
<li></li>
</ul>
</div>
<div class="main-content">
<div class="nav">asdasd</div>
<div class="tasks">
<div class="left-side">
<div class="top-left">
<ul class="date">
<li>Monday</li>
<li>monday</li>
<li>monday</li>
<li>monday</li>
<li>monday</li>
<li>monday</li>
<li>monday</li>
</ul>
</div>
<div class="bottom-left">adasd</div>
</div>
<div class="right-side">asda</div>
</div>
</div>
</body>
</html>
在這里，我們將所有<img>元素放在一個<span>元素中。因此，只要用戶將滑鼠懸停在影像上，影像就會變得透明（或消失），并且 span 標簽將采用您想要的顏色。
uj5u.com熱心網友回復：
繼續查看這篇文章，它列出了許多您可能會發現有用的懸停 css 效果。
-> https://www.foolishdeveloper.com/2022/03/css-image-hover-effects.html
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/520405.html