我有一個(gè)相當(dāng)奇怪的要求，這讓我有點(diǎn)困惑。本質(zhì)上我有這樣的東西：01 標(biāo)題一個(gè)項(xiàng)目另一個(gè)項(xiàng)目因此，當(dāng)數(shù)字或標(biāo)題懸停時(shí)。01 變?yōu)榘咨?標(biāo)題變?yōu)榧t色，列表項(xiàng)變?yōu)榘咨，F(xiàn)在我知道你可以做類似的事情.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>懸停時(shí)所需的效果任何建議或提示將不勝感激。我想了解如何正確實(shí)現(xiàn)這一目標(biāo)，因此存在疑問
3 回答
牧羊人nacy
TA貢獻(xiàn)1862條經(jīng)驗(yàn) 獲得超7個(gè)贊
你可以使用兄弟CSS選擇器
.below-num:hover {
color: white;
}
.below-num:hover + .below-title {
color: red;
}
largeQ
TA貢獻(xiàn)2039條經(jīng)驗(yàn) 獲得超8個(gè)贊
試試這個(gè)方法
.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貢獻(xiàn)1818條經(jīng)驗(yàn) 獲得超7個(gè)贊
好吧，我想我可以幫忙：你的 css 中需要這個(gè)：
第一個(gè)永遠(yuǎn)都是這樣。
.number .title{
some style
}第二個(gè)是當(dāng)您將鼠標(biāo)懸停在其上時(shí)。
.number:hover .title{
}如果這不是您想要的，請澄清一下，我會(huì)更好一點(diǎn)。
- 3 回答
- 0 關(guān)注
- 205 瀏覽
添加回答
舉報(bào)
0/150
提交
取消