如何使用CSS在鼠标悬停时设置特定元素的样式? [英] How to Style Specific Element On Hover With CSS?

问题描述

此问题适用于

解决方案

正方形位于< a> 标记内，而不是像您尝试做的那样.您的CSS .fa a:hover 适用于 .fa 内的< a> ，这是正方形的类.

问题是绿色应用于正方形< i> ，而不是< a> .我无法测试您的代码，但是请尝试以下操作:

  .social-icons i:hover {颜色:#72984a;} 

或者当然是相同的，但是使用类选择器而不是标签:

  .social-icons .fa:hover {颜色:#72984a;} 

但是，如果要遵循现有的CSS方式，请使用以下方法:

  .site-header .fa:hover {颜色:#72984a;} 

在所有情况下，请始终尝试应用正确的样式，并避免使用！important .

This question is for http://chameleonwebsolutions.com. I need it so that when you hover over the social media links, their color changes to a darker green (#72984a). I tried:

.site-header .fa a:hover {
color: #72984a !important;
}

.fa .fa-facebook-square a:hover {
color:#72984a !important;
}

.social-icons a:hover {
color:#72984a !important;
}

.logo .mobile-social-icons .hidden-tablet a:hover {
color:#72984a !important;
}

.social-icons .hidden-mobile .responsive-header-gutter a:hover {
color: #72984a !important;
}

In the stylesheet but none of them are showing up in the inspector. I would try just a:hover in the stylesheet (no class before it) but then of course that would apply to all of the hyperlinks. How can I style only the social media links when you hover over them? Thanks!

解决方案

The squares are inside the <a> tags, not the other way around like you're trying to do. Your CSS .fa a:hover applies to <a> inside the .fa which is the class for the squares.

The problem is that the green color is applied to the squares <i> not the <a>. I cannot test your code, but try this:

.social-icons i:hover {
    color: #72984a;
}

Or of course this is the same but using class selector instead of tag:

.social-icons .fa:hover {
    color: #72984a;
}

However, if you want to follow the exiting CSS way, use this:

.site-header .fa:hover {
    color: #72984a;
}

In all cases, always try to apply the correct styles and avoid using !important.

这篇关于如何使用CSS在鼠标悬停时设置特定元素的样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！