Question

我有一段艰难的时光。我已经创建了一些图标，可以在几个链接旁边找到。链接具有在悬停时应用于它们的“下划线”文本修饰效果。我添加了图标，它完全适合，只是当锚标记悬停时图标没有加下划线。我做错了什么？

HTML

                    <a class="link" href="#"> 
                        <img src="images/home.png" alt="" id="home" class="icon"/>
                        home
                    </a>
                    <a class="link" href="about/">
                        <img src="images/about.png" alt="" id="about" class="icon"/>
                        About
                    </a>
                    <a class="link" href="contact/">
                        <img src="images/contact.png" alt="" id="contact" class="icon"/>
                        Contact
                    </a>
                    <a class="link" href="work/">
                        <img src="images/work.png" alt="" id="work" class="icon"/>
                        Work
                    </a>

CSS

#home {

    width: 15px;
    height: 15px;

}

#about { 

    width: 15px;
    height: 15px;

}

#contact {

    width: 19px;
    height: 15px;

}

#work {

    width: 16px;
    height: 15px;

}

.link {

    margin: 0;
    padding: 0;
    display: inline-block;
    line-height: 50px;
    width: 100px;
    font-size: 18px;
    font-family: arial;

}

.link:link {

    color: #ffffff;
    font-weight: bold;
    text-decoration: none;

}

.link:visited {

    color: #ffffff;
    font-weight: bold;
    text-decoration: none;

}

.link:active {

    color: #ffffff;
    font-weight: bold;
    text-decoration: none;

}

.link:hover {

    color: #ffffff;
    font-weight: bold;
    text-decoration: underline;

}

我很感激帮助。

Answer 1

好吧，我明白了。我最终使用了border方法。通过定义“链接”类的高度，我可以增加或减少从文本和图标到底部边框的距离。

对于有此问题的其他人，固定代码是......

HTML

        <div class="navbar">
                    <a class="link" href="#"> 
                        <img src="images/home.png" alt="" id="home" class="icon"/>
                        Home
                    </a>
                    <a class="link" href="about/">
                        <img src="images/about.png" alt="" id="about" class="icon"/>
                        About
                    </a>
                    <a class="link" href="contact/">
                        <img src="images/contact.png" alt="" id="contact" class="icon"/>
                        Contact
                    </a>
                    <a class="link" href="work/">
                        <img src="images/work.png" alt="" id="work" class="icon"/>
                        Work
                    </a>
        </div>

CSS

#home {

    width: 15px;
    height: 15px;

}

#about { 

    width: 15px;
    height: 15px;

}

#contact {

    width: 19px;
    height: 15px;

}

#work {

    width: 16px;
    height: 15px;

}

.link {

    margin: 0;
    padding: 0;
    display: inline-block;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 12px;
    height: 18px;
    font-size: 18px;
    font-family: arial;

}

.link:link {

    color: #ffffff;
    font-weight: bold;
    text-decoration: none;

}

.link:visited {

    color: #ffffff;
    font-weight: bold;
    text-decoration: none;

}

.link:active {

    color: #ffffff;
    font-weight: bold;
    text-decoration: none;

}

.link:hover {

    color: #ffffff;
    font-weight: bold;
    text-decoration: none; 
    border-bottom: 1px solid #ffffff;

}

Answer 2

为什么不尝试这样的事情::（你不能用img属性强调text-decoration

a{
margin-left:30px;
font-size:18px;
text-decoration:none;
}
a:hover { 
border-bottom:1px solid blue;
}

示例:: FIDDLE

如何为图像添加文本修饰？

2 个答案: