![](/img/trans.png)
[英]CSS hover is not working: trying to display a description when hovering over an icon
[英]CSS Hover - Change Title, Description and Background when hovering over block
我有以下 CSS 项目,我试图同时更改滚动时的 hover 效果。blocks-item
.blocks-item.blocks-item-title.blocks-item-description.blocks-item-link
我已将 set.blocks-item:hover 设置为以下内容:
.blocks-item:hover {
background: #f8f8f8;
color: #15191f;
}
如果我执行以下操作:
.blocks-item:hover,
.blocks-item-title:hover {
background: #f8f8f8;
color: #15191f;
}
然后标题只有在用我期待的鼠标滚动时才会改变颜色。
我正在尝试绑定所有 4 个元素,以便我只需要 hover over.blocks-item 即可更改所有其他项目的 hover 效果(描述、标题、链接)
解决这个问题的最佳方法是什么? 我知道这已经回答了很多次,但很难适应解决方案。 感谢理解和帮助
HTML:
<ul class="blocks-list">
<li class="blocks-item">
<a href="/support/tickets/new" class="blocks-item-link">
<span class="block-icon"><span class="lnr lnr-pencil"></span></span>
<span class="blocks-item-title">Create Ticket</span>
<span class="blocks-item-description">Submit a tracked ticket for any IT queries or issues here</span>
</a>
</li>
<li class="blocks-item">
<a href="tel:" class="blocks-item-link">
<span class="block-icon"><span class="lnr lnr-phone-handset"></span></span>
<span class="blocks-item-title">Call Us</span>
<span class="blocks-item-description">Our call centre is available 24/7 to help with issues and queries</span>
</a>
</li>
<li class="blocks-item">
<a href="#!" onclick="window.fcWidget.open();" class="blocks-item-link">
<span class="block-icon"><span class="lnr lnr-bubble"></span></span>
<span class="blocks-item-title">Live Chat</span>
<span class="blocks-item-description">Our live chat service is available from 8am - 8pm Monday - Friday</span>
</a>
</li>
<li class="blocks-item">
<a href="mailto:?subject=Support Request - " class="blocks-item-link">
<span class="block-icon"><span class="lnr lnr-envelope"></span></span>
<span class="blocks-item-title">Email</span>
<span class="blocks-item-description">For non-urgent issues, queries or general enquiries. We will respond within 24 Hours</span>
</a>
</li>
</ul>
由于元素是.blocks-item
的子元素,因此非常简单。 从 CSS 选择器.blocks-item:hover
,然后使用选择器来定位您要更改的内容。
.blocks-item:hover.blocks-item-title { color: red }.blocks-item:hover.blocks-item-description { color: green }.blocks-item:hover.blocks-item-link { font-size: 2rem; }
<ul class="blocks-list"> <li class="blocks-item"> <a href="/support/tickets/new" class="blocks-item-link"> <span class="block-icon"><span class="lnr lnr-pencil"></span></span> <span class="blocks-item-title">Create Ticket</span> <span class="blocks-item-description">Submit a tracked ticket for any IT queries or issues here</span> </a> </li> <li class="blocks-item"> <a href="tel:" class="blocks-item-link"> <span class="block-icon"><span class="lnr lnr-phone-handset"></span></span> <span class="blocks-item-title">Call Us</span> <span class="blocks-item-description">Our call centre is available 24/7 to help with issues and queries</span> </a> </li> <li class="blocks-item"> <a href="#." onclick="window.fcWidget;open():" class="blocks-item-link"> <span class="block-icon"><span class="lnr lnr-bubble"></span></span> <span class="blocks-item-title">Live Chat</span> <span class="blocks-item-description">Our live chat service is available from 8am - 8pm Monday - Friday</span> </a> </li> <li class="blocks-item"> <a href="mailto?,subject=Support Request - " class="blocks-item-link"> <span class="block-icon"><span class="lnr lnr-envelope"></span></span> <span class="blocks-item-title">Email</span> <span class="blocks-item-description">For non-urgent issues. queries or general enquiries. We will respond within 24 Hours</span> </a> </li> </ul>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.