如何在懸停菜單上隱藏文本並用下划線代替圖像？

Question

我想將菜單置於頂部，並將鼠標懸停以隱藏文本並顯示圖標。 並在icon下添加下划線。在我的代碼中，我成功將文本更改為圖像，但如何在圖像下添加下划線並使下划線3像素寬和60像素長？ 我的代碼是HTML：

<div class="menu topMenu">
<ul class="topMenuOptions">
    <li><span>111</span></li>
    <li><span>222</span></li>
    <li><span>333</span></li>
</ul>

CSS：

.topMenu {
text-transform: uppercase;
background-image: url('images/1.png');
position: absolute;
height: 88px;
width: 400px;
background: lightcoral;
margin-left: 332px;
padding-top: 30px;
 }

.topMenuOptions {
padding: 0;
margin: 0;
margin-left: 155px;
list-style-type: none;
}

.topMenuOptions li {
    cursor: pointer;
    padding: 10px;
    color: white;
    font-size: 14px;
    display: inline;
}

    .topMenuOptions li:hover:nth-child(1) {
        background: url('images/2.png') center center no-repeat;
        background-position: 20px 0;
        background-size: contain;
        color:transparent;
    }

    .topMenuOptions li:hover:nth-child(2) {
        background: url('images/3.png') center center no-repeat;
        background-size: contain;
        background-position: 20px 0;
        color: transparent;
    }

      .topMenuOptions li:hover:nth-child(3) {
        background: url('images/4.png') center center no-repeat;
        background-size: contain;
        background-position: 20px 0;
        color: transparent;
    }

Answer 1

使用下border-bottom: 3px solid white; ， 例如：

.topMenuOptions li:hover:nth-child(1) {
    background: url('images/2.png') center center no-repeat;
    background-position: 20px 0;
    background-size: contain;
    color:transparent;
    border-bottom: 3px solid #fff;
}

Answer 2

根據您的要求，我做了一個小提琴，您可以檢查一下。

對於下划線，您可以使3px的邊框底部與最初的border-color保持透明。 默認情況下，此透明顏色是必需的，以避免在懸停時添加邊框時文本的抖動。

我對您的代碼做了一些修改，僅供您理解。

 .topMenu { text-transform: uppercase; background-image: url('images/1.png'); position: absolute; height: 88px; width: 400px; background: lightcoral; /* margin-left: 332px; */ padding-top: 30px; } .topMenuOptions { padding: 0; margin: 0; margin-left: 155px; list-style-type: none; } .topMenuOptions li { cursor: pointer; padding: 10px; color: white; font-size: 14px; display: inline; border-bottom: 3px solid transparent; } .topMenuOptions li:hover:nth-child(1) { background: url('http://php.quicoto.com/wp-content/uploads/2013/06/css3.jpg') center center no-repeat; background-position: 0px 0; background-size: contain; color: transparent; border-bottom: 3px solid #fff; } .topMenuOptions li:hover:nth-child(2) { background: url('http://php.quicoto.com/wp-content/uploads/2013/06/css3.jpg') center center no-repeat; background-size: contain; background-position: 0px 0; color: transparent; border-bottom: 3px solid #fff; } .topMenuOptions li:hover:nth-child(3) { background: url('http://php.quicoto.com/wp-content/uploads/2013/06/css3.jpg') center center no-repeat; background-size: contain; background-position: 0px 0; color: transparent; border-bottom: 3px solid #fff; } 

 <div class="menu topMenu"> <ul class="topMenuOptions"> <li><span>111</span></li> <li><span>222</span></li> <li><span>333</span></li> </ul> 

JSFIDDLE

Answer 3

`<ul>
    <li class="option">
        <span id="text">111</span>
        <span id="image" class="hide">IMAGE</span>
    </li>
    <li class="option">
        <span id="text">222</span>
        <span id="image" class="hide">IMAGE</span>
    </li>
</ul>`


.option:hover .option > #image
{
display:block;
border-bottom:1px solid black;
}
.option:hover: .option > #text
{
display:none;
}
.hide
{
display:none;
}

您可以執行這樣的操作，這樣效率更高，可以在圖像范圍內添加圖像標簽，這也可以完成任務。