[英]CSS Hover - Change Title, Description and Background when hovering over block
I have the following CSS items that I am trying to simultaneously change the hover effect for when rolling over.blocks-item我有以下 CSS 项目,我试图同时更改滚动时的 hover 效果。blocks-item
.blocks-item.blocks-item-title.blocks-item-description.blocks-item-link .blocks-item.blocks-item-title.blocks-item-description.blocks-item-link
I have set.blocks-item:hover to the following:我已将 set.blocks-item:hover 设置为以下内容:
.blocks-item:hover {
background: #f8f8f8;
color: #15191f;
}
If I do the following:如果我执行以下操作:
.blocks-item:hover,
.blocks-item-title:hover {
background: #f8f8f8;
color: #15191f;
}
Then the title only changes colour when rolled over with the mouse which I am expecting.然后标题只有在用我期待的鼠标滚动时才会改变颜色。
I am trying to bind all of the 4 elements so that I only need to hover over.blocks-item to be able to change the hover effect of all of the other items (description, title, link)我正在尝试绑定所有 4 个元素,以便我只需要 hover over.blocks-item 即可更改所有其他项目的 hover 效果(描述、标题、链接)
What is the best way of going about this?解决这个问题的最佳方法是什么? I know this has been answered many times but struggling to adapt the solutions.
我知道这已经回答了很多次,但很难适应解决方案。 Appreciate the understanding and help
感谢理解和帮助
HTML: 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>
Since the elements are children of .blocks-item
, it's pretty simple.由于元素是
.blocks-item
的子元素,因此非常简单。 Start with a CSS selector .blocks-item:hover
and then use a selector to target what you want to change.从 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.