4

我的日子有点难过。我创建了一些图标放在一些链接旁边。链接具有“下划线”文本装饰效果，在悬停时应用于它们。我添加了图标，它非常适合，只是当锚标签悬停时图标没有下划线。我究竟做错了什么？

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;

}

我很感激帮助。

4

2 回答 2

1

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

对于遇到此问题的其他任何人，固定代码是...

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;

}
于 2013-08-17T23:27:14.290 回答
1

你为什么不尝试这样的事情 :: （你不能img在text-decoration属性下划线）

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

示例 ::小提琴

于 2013-08-17T07:33:23.433 回答