如何在悬停菜单上隐藏文本并用下划线代替图像？

Question

I want to make menu on top, and on hover mouse to hide text and display icon. And to add underline under icon.In my code i successfully change text to image but how to add underline under image and make underline 3px wight and 60px length? There is my code- 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

Use border-bottom: 3px solid white; , for example:

.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

As per your requirement, I made a fiddle which you can check.

for the underline, you can keep border-bottom of 3px with border-color initially as transparent. this transparent color is required by default to avoid the jerking of the text when a border is added on hover.

I have modified your code a bit just for your understanding.

 .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;
}

you can do something like this, which is more efficient, inside the image span you can add a image tag, which will also do the job.