Question

我正在通过在Web应用程序中添加一个悬停效果来设计它的样式。我在HTML文档中内嵌了svg。 svg包装在超链接中，我想向链接添加悬浮效果（而不是svg本身）。问题是，当我使用一个类来设置链接样式时，它不起作用，但是当我使用id时，它起作用了。我不明白为什么。

我已经能够按照自己想要的方式对ID进行样式设置，但是我想了解为什么无法对类进行处理。

所以问题实际上出在页脚上。可以确定问题不是其他类正在覆盖我的svg悬停样式，这是我在HTML中的整个页脚：

<footer>
            <div class="row">
                <div class="col span-1-of-2">
                    <ul class="footer-nav">
                        <li><a href="#">About us</a></li>
                        <li><a href="#">Blog</a></li>
                        <li><a href="#">Press</a></li>
                        <li><a href="#">iOS App</a></li>
                        <li><a href="#">Android App</a></li>
                    </ul>
                </div>

                <div class="col span-1-of-2">
                    <ul class="social-icons">
                        <li><a class="facebook-icon" href="#"><svg version="1.1" width="25px" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                            viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
                            <path d="M384,176h-96v-64c0-17.664,14.336-32,32-32h32V0h-64l0,0c-53.024,0-96,42.976-96,96v80h-64v80h64v256h96V256h64L384,176z"/>
                            </svg></a>
                        </li>
                        <li><a href="#"><img src="vendors/img/social-media/twitter.svg"></a></li>
                        <li><a href="#"><img src="vendors/img/social-media/google-plus.svg"></a></li>
                        <li><a href="#"><img src="vendors/img/social-media/instagram.svg"></a></li>
                    </ul>
                </div>
            </div>

            <div class="row">
                <p>
                    Copyright &copy; 2015 by Omnifood. All rights reserved.
                </p>
            </div>
        </footer>

这是我的页脚CSS：

/* ----- FOOTER ------ */

footer {
    background-color: #313131;
    padding: 50px;
}

.footer-nav {
    list-style: none;
    float: left;
}

.social-icons {
    list-style: none;
    float: right;
}

.social-icons img {
    width: 25px;
}

.footer-nav li,
.social-icons li {
    display: inline-block;
    margin-right: 20px;
}

.footer-nav li:last-child,
.social-icons li:last-child {
    margin-right: 0;
}

.footer-nav li a:link,
.footer-nav li a:visited,
.social-icons li a:link,
.social-icons li a:visited {
    text-decoration: none;
    border: 0;
    color: #888;
    fill: #888;
    transition: fill 0.2s;
}

.facebook-icon:hover,
.facebook-icon:active{
    fill: #fff;
}

.footer-nav li a:hover,
.footer-nav li a:active {
    color: #ddd;
}

footer p {
    color: #888;
    text-align: center;
    font-size: 90%;
    margin-top: 30px;
}


/* ----- END FOOTER ------ */

Answer 1

代替

.facebook-icon:hover 
.facebook-icon:active{
    fill: #fff;
    color: #ddd;
}

您应该拥有

.facebook-icon:hover #Capa_1
.facebook-icon:active #Capa_1{
    fill: #fff;
    color: #ddd;
}

以便实际上可以将填充和颜色应用于svg元素。

这也适用于类！

您只需将class =“ capa_class”应用于svg元素

然后您可以执行以下操作：

.facebook-icon:hover .capa_class,
.facebook-icon:active .capa_class{
    fill: #fff;
    color: #ddd;
}

它也会正常工作

/* ----- FOOTER ------ */

footer {
    background-color: #313131;
    padding: 50px;
}

.footer-nav {
    list-style: none;
    float: left;
}

.social-icons {
    list-style: none;
    float: right;
}

.social-icons img {
    width: 25px;
}

.footer-nav li,
.social-icons li {
    display: inline-block;
    margin-right: 20px;
}

.footer-nav li:last-child,
.social-icons li:last-child {
    margin-right: 0;
}

.footer-nav li a:link,
.footer-nav li a:visited,
.social-icons li a:link,
.social-icons li a:visited {
    text-decoration: none;
    border: 0;
    color: #888;
    fill: #888;
    transition: fill 0.2s;
}

/*
.facebook-icon:hover #Capa_1,
.facebook-icon:active #Capa_1{
    fill: #fff;
    color: #ddd;
}

*/

.facebook-icon:hover .capa_class,
.facebook-icon:active .capa_class{
    fill: #fff;
    color: #ddd;
}


footer p {
    color: #888;
    text-align: center;
    font-size: 90%;
    margin-top: 30px;
}


/* ----- END FOOTER ------ */

<footer>
            <div class="row">
                <div class="col span-1-of-2">
                    <ul class="footer-nav">
                        <li><a href="#">About us</a></li>
                        <li><a href="#">Blog</a></li>
                        <li><a href="#">Press</a></li>
                        <li><a href="#">iOS App</a></li>
                        <li><a href="#">Android App</a></li>
                    </ul>
                </div>

                <div class="col span-1-of-2">
                    <ul class="social-icons">
                        <li><a class="facebook-icon" href="#"><svg version="1.1" width="25px" class="capa_class" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                            viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
                            <path d="M384,176h-96v-64c0-17.664,14.336-32,32-32h32V0h-64l0,0c-53.024,0-96,42.976-96,96v80h-64v80h64v256h96V256h64L384,176z"/>
                            </svg></a>
                        </li>
                        <li><a href="#"><img src="vendors/img/social-media/twitter.svg"></a></li>
                        <li><a href="#"><img src="vendors/img/social-media/google-plus.svg"></a></li>
                        <li><a href="#"><img src="vendors/img/social-media/instagram.svg"></a></li>
                    </ul>
                </div>
            </div>

            <div class="row">
                <p>
                    Copyright &copy; 2015 by Omnifood. All rights reserved.
                </p>
            </div>
        </footer>

如何使用类对超链接内的svg进行样式设置？

1 个答案: