我有一個相當奇怪的要求，這讓我有點困惑。本質上我有這樣的東西：01 標題一個項目另一個項目因此，當數字或標題懸停時。01 變為白色 標題變為紅色，列表項變為白色?，F在我知道你可以做類似的事情.number:hover .title{
}但不確定如何去做。<div class="row we-below"> <div class="col-md-3"> <p class="below-num">01</p> <h4 class="below-title">CONTENT</h4> <ul> <li>Research</li> <li>Strategy</li> <li>Copywriting</li> <li>Custom content</li> <li>Content planning</li> <li>Campaign framework</li> <li>Consulting</li> </ul> </div> <div class="col-md-3"> <p class="below-num">02</p> <h4 class="below-title">DESIGN</h4> <ul> <li>Art Direction</li> <li>Digital Assets</li> <li>Animation</li> <li>Photography</li> <li>Videography</li> <li>Graphic Design</li> <li>Packaging proposals</li> <li>Studio Recording</li> <li>Illustration</li> <li>Branding</li> <li>Iconography</li> <li>Website Design</li> <li>Social Media</li> <li>Activations</li> <li>Campaign Strategy</li> <li>UI Design</li> <li>UX Design</li> </ul> </div>懸停時所需的效果任何建議或提示將不勝感激。我想了解如何正確實現這一目標，因此存在疑問
3 回答
牧羊人nacy
TA貢獻1862條經驗 獲得超7個贊
你可以使用兄弟CSS選擇器
.below-num:hover {
color: white;
}
.below-num:hover + .below-title {
color: red;
}
largeQ
TA貢獻2039條經驗 獲得超8個贊
試試這個方法
.below-num:hover ~ .below-title {
color: red;
}
.below-num:hover ~ ul li {
color: white;
}
* {
background: black;
color: white;
}
li {
color: gray;
}
.below-num:hover ~ .below-title {
color: red;
}
.below-num:hover ~ ul li {
color: white;
}
<div class="row we-below">
<div class="col-md-3">
<p class="below-num">01</p>
<h4 class="below-title">CONTENT</h4>
<ul>
<li>Research</li>
<li>Strategy</li>
<li>Copywriting</li>
<li>Custom content</li>
<li>Content planning</li>
<li>Campaign framework</li>
<li>Consulting</li>
</ul>
</div>
<div class="col-md-3">
<p class="below-num">02</p>
<h4 class="below-title">DESIGN</h4>
<ul>
<li>Art Direction</li>
<li>Digital Assets</li>
<li>Animation</li>
<li>Photography</li>
<li>Videography</li>
<li>Graphic Design</li>
<li>Packaging proposals</li>
<li>Studio Recording</li>
<li>Illustration</li>
<li>Branding</li>
<li>Iconography</li>
<li>Website Design</li>
<li>Social Media</li>
<li>Activations</li>
<li>Campaign Strategy</li>
<li>UI Design</li>
<li>UX Design</li>
</ul>
</div>
<div class="col-md-3">
<p class="below-num">03</p>
<h4 class="below-title">BUILD</h4>
<ul>
<li>App Creation</li>
<li>Packaging</li>
<li>Prototyping</li>
<li>Digital Production</li>
<li>Graphic Assets</li>
<li>Layout & Design</li>
<li>Google Adwords</li>
<li>Style Guides</li>
</ul>
</div>
<div class="col-md-3">
<p class="below-num">04</p>
<h4 class="below-title">EXECUTION</h4>
<ul>
<li>Media buying</li>
<li>Media planning</li>
<li>Scheduling</li>
<li>Community management</li>
<li>Website Maintenance</li>
<li>Public Relations</li>
<li>Project Management</li>
<li>Corporate Identity Document</li>
</ul>
</div>
</div>
qq_笑_17
TA貢獻1818條經驗 獲得超7個贊
好吧，我想我可以幫忙：你的 css 中需要這個：
第一個永遠都是這樣。
.number .title{
some style
}第二個是當您將鼠標懸停在其上時。
.number:hover .title{
}如果這不是您想要的，請澄清一下，我會更好一點。
- 3 回答
- 0 關注
- 181 瀏覽
添加回答
舉報
0/150
提交
取消