1 次悬停时 3 个不同项目有 3 种不同的悬停效果

Question

我有一个相当奇怪的要求，这让我有点困惑。

本质上我有这样的东西：

01 标题

1. 一个项目

2. 另一个项目

因此，当数字或标题悬停时。01 变为白色 标题变为红色，列表项变为白色。

现在我知道你可以做类似的事情

.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>

悬停时所需的效果

任何建议或提示将不胜感激。我想了解如何正确实现这一目标，因此存在疑问

Answer 1

你可以使用兄弟CSS选择器.below-num:hover {&nbsp; &nbsp; color: white;}.below-num:hover + .below-title {&nbsp; &nbsp; color: red;}

Answer 2

试试这个方法.below-num:hover ~ .below-title {&nbsp; color: red;}.below-num:hover ~ ul li {&nbsp; color: white;}* {&nbsp; background: black;&nbsp; color: white;}li {&nbsp; color: gray;}.below-num:hover ~ .below-title {&nbsp; color: red;}.below-num:hover ~ ul li {&nbsp; color: white;}<div class="row we-below">&nbsp; <div class="col-md-3">&nbsp; &nbsp; <p class="below-num">01</p>&nbsp; &nbsp; <h4 class="below-title">CONTENT</h4>&nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; <li>Research</li>&nbsp; &nbsp; &nbsp; <li>Strategy</li>&nbsp; &nbsp; &nbsp; <li>Copywriting</li>&nbsp; &nbsp; &nbsp; <li>Custom content</li>&nbsp; &nbsp; &nbsp; <li>Content planning</li>&nbsp; &nbsp; &nbsp; <li>Campaign framework</li>&nbsp; &nbsp; &nbsp; <li>Consulting</li>&nbsp; &nbsp; </ul>&nbsp; </div>&nbsp; <div class="col-md-3">&nbsp; &nbsp; <p class="below-num">02</p>&nbsp; &nbsp; <h4 class="below-title">DESIGN</h4>&nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; <li>Art Direction</li>&nbsp; &nbsp; &nbsp; <li>Digital Assets</li>&nbsp; &nbsp; &nbsp; <li>Animation</li>&nbsp; &nbsp; &nbsp; <li>Photography</li>&nbsp; &nbsp; &nbsp; <li>Videography</li>&nbsp; &nbsp; &nbsp; <li>Graphic Design</li>&nbsp; &nbsp; &nbsp; <li>Packaging proposals</li>&nbsp; &nbsp; &nbsp; <li>Studio Recording</li>&nbsp; &nbsp; &nbsp; <li>Illustration</li>&nbsp; &nbsp; &nbsp; <li>Branding</li>&nbsp; &nbsp; &nbsp; <li>Iconography</li>&nbsp; &nbsp; &nbsp; <li>Website Design</li>&nbsp; &nbsp; &nbsp; <li>Social Media</li>&nbsp; &nbsp; &nbsp; <li>Activations</li>&nbsp; &nbsp; &nbsp; <li>Campaign Strategy</li>&nbsp; &nbsp; &nbsp; <li>UI Design</li>&nbsp; &nbsp; &nbsp; <li>UX Design</li>&nbsp; &nbsp; </ul>&nbsp; </div>&nbsp; <div class="col-md-3">&nbsp; &nbsp; <p class="below-num">03</p>&nbsp; &nbsp; <h4 class="below-title">BUILD</h4>&nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; <li>App Creation</li>&nbsp; &nbsp; &nbsp; <li>Packaging</li>&nbsp; &nbsp; &nbsp; <li>Prototyping</li>&nbsp; &nbsp; &nbsp; <li>Digital Production</li>&nbsp; &nbsp; &nbsp; <li>Graphic Assets</li>&nbsp; &nbsp; &nbsp; <li>Layout & Design</li>&nbsp; &nbsp; &nbsp; <li>Google Adwords</li>&nbsp; &nbsp; &nbsp; <li>Style Guides</li>&nbsp; &nbsp; </ul>&nbsp; </div>&nbsp; <div class="col-md-3">&nbsp; &nbsp; <p class="below-num">04</p>&nbsp; &nbsp; <h4 class="below-title">EXECUTION</h4>&nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; <li>Media buying</li>&nbsp; &nbsp; &nbsp; <li>Media planning</li>&nbsp; &nbsp; &nbsp; <li>Scheduling</li>&nbsp; &nbsp; &nbsp; <li>Community management</li>&nbsp; &nbsp; &nbsp; <li>Website Maintenance</li>&nbsp; &nbsp; &nbsp; <li>Public Relations</li>&nbsp; &nbsp; &nbsp; <li>Project Management</li>&nbsp; &nbsp; &nbsp; <li>Corporate Identity Document</li>&nbsp; &nbsp; </ul>&nbsp; </div></div>

Answer 3

好吧，我想我可以帮忙：你的 css 中需要这个：第一个永远都是这样。.number&nbsp;.title{ some&nbsp;style }第二个是当您将鼠标悬停在其上时。.number:hover&nbsp;.title{ }如果这不是您想要的，请澄清一下，我会更好一点。