當給a標簽添加hover后，滑鼠懸停不顯示hover中的樣式，只有點擊之后才顯示hover中的樣式，而且選項卡的hover效果可以切換。沒有使用到js就能切換樣式，我想知道這是什么原理。
uj5u.com熱心網友回復：
點擊后給a標簽的父級添加一個active，同時洗掉兄弟節點的active樣式。<li onclick="change(this)"><a>xxxx</a></li>
點擊后
<li class="active" onclick="change(this)"><a>xxxx</a></li>
function change (el) {
el.className = 'active
// 清空同級的actvie樣式
}
css
li.active a {
color: red;
}
uj5u.com熱心網友回復：
感謝你的回復。上面圖片展示是通過css給a標簽添加hover實作的切換效果，沒有使用到js。我的疑問就是hover中的樣式通常是是滑鼠懸停后就會顯示，但我這里給a標簽添加hover后滑鼠懸停不顯示樣式，點擊之后才顯示hover中的樣式。并且可以像js那樣達到切換效果。
uj5u.com熱心網友回復：
<style type="text/css">.link{
color:cornflowerblue;
}
.link:hover {
color:red;
}
</style>
<a class="link">滑鼠移動到我這，我會變成紅色</a>
uj5u.com熱心網友回復：
hover失效 有可能是因為偽類的優先級的問題uj5u.com熱心網友回復：
html+css可以做到很多事情，包括炫酷的輪播圖都沒問題原理就是label標簽控制一個單選按鈕，然后用input:checked+.box3屬性選擇器+兄弟選擇器來控制樣式
寫了一個簡單的table欄切換，代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 400px;
height: 100px;
border: 1px solid blue;
margin: 100px auto 0;
}
.box2 {
width: 400px;
height: 300px;
border: 1px solid blue;
margin: 0 auto;
}
.box1 {
width: 20%;
float: left;
height: 100%;
box-sizing: border-box;
border: 1px solid pink;
}
.box3 {
display: none;
width: 100%;
height: 100%;
}
input {
display: none;
}
input:checked+.box3 {
display: block;
background-color: aqua;
}
</style>
</head>
<body>
<div class="box">
<label for="q1"> <div class="box1">1</div></label>
<label for="q2"> <div class="box1">2</div></label>
<label for="q3"> <div class="box1">3</div></label>
<label for="q4"> <div class="box1">4</div></label>
<label for="q5"> <div class="box1">5</div></label>
</div>
<div class="box2">
<input type="radio" name="w" id="q1" checked="checked">
<div class="box3">1</div>
<input type="radio" name="w" id="q2">
<div class="box3">2</div>
<input type="radio" name="w" id="q3">
<div class="box3">3</div>
<input type="radio" name="w" id="q4">
<div class="box3">4</div>
<input type="radio" name="w" id="q5">
<div class="box3">5</div>
</div>
</body>
</html>
uj5u.com熱心網友回復：
可能是a:hover優先級出現了問題，我這個是可以的<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.nav {
height: 41px;
border-top: 3px solid #ff8500;
border-bottom: 1px solid #edeef0;
background-color: #fcfcfc;
line-height: 41px;
}
.nav a {
display: inline-block;
/* 垂直對齊方式 */
vertical-align: top;
height: 41px;
padding: 0 20px;
font-size: 12px;
color: #4c4c4c;
text-decoration: none;
}
.nav a:hover {
color: orangered;
background-color: slategrey;
}
</style>
</head>
<body>
<div class="nav">
<a href="https://bbs.csdn.net/topics/#">設為首頁</a>
<a href="https://bbs.csdn.net/topics/#">手機新浪網</a>
<a href="https://bbs.csdn.net/topics/#">移動客戶端</a>
<a href="https://bbs.csdn.net/topics/#">博客</a>
<a href="https://bbs.csdn.net/topics/#">微博</a>
<a href="https://bbs.csdn.net/topics/#">關注我</a>
</div>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/33578.html
標籤：HTML(CSS)
上一篇：js 操作剪貼板
下一篇：為什么這段代碼只輸出了a?