懸停在錨標記元素與圖像只出現在懸停

Question

我想添加，「箭頭向下」圖像懸停錨標記元素，如下圖所示。如何實現這一目標？

這裏是我的代碼：

HTML：

<div class="menu"> 
    <ul> 
    <li><a href="#">HOME</a></li> 
    <li><a href="#">PROFILE</a></li> 
    <li><a href="#">ACHIEVEMENTS</a></li> 
    <li><a href="#">AWARDS</a></li> 
    <li><a href="#">PUBLICATIONS</a></li> 
    <li><a href="#">MEDIA</a></li> 
    </ul> 
</div> 

CSS：

.menu{float:left;margin-left:1%;} 
.menu ul li{list-style:none;float:left;margin-right:18px;} 
.menu ul li:last-child{margin-right:0;} 
.menu ul li a{text-decoration:none;color:#fff; font-family: 'OpenSansSemibold';font-size:14px;border-bottom:3px solid transparent;padding-bottom:5px;} 
.menu ul li a:hover{background:url("images/arrow-down.png")no-repeat 50% 100%;border-bottom:3px solid #fff;} 

Answer 1

擴展在Balvant阿爾的迴應

後你挖起來的css trianlges

您可以使用僞元素來創建一個三角形，CSS圖片下方

.menu ul li a:after { 
    content: ""; 
    width: 0; 
    height: 0; 
    border: 6px solid transparent; 
    border-top-color: white; 
    position: absolute; 
    bottom: -15px; 
    left: 50%; 
    margin-left: -3px; 
} 

箭頭絕對定位，所以需要鏈接本身

上的相對位置設置

.menu ul li a { 
    position: relative; 
} 

這與display:none和display:block懸停玩耍

.menu ul li a:after { 
    display: none; 
} 

.menu ul li a:hover:after { 
    display: block; 
} 

應該是足夠

演示：https://jsfiddle.net/Varinder/6sa3a4k4/

Answer 2

像這樣的事情？當你有css做這項工作時，不要去找影像。檢查其他樣式。

​​3210

.menu ul { 
 
    float: left; 
 
    margin-left: 1%; 
 
} 
 
.menu ul li { 
 
    list-style: none; 
 
    float: left; 
 
    margin-right: 18px; 
 
} 
 
.menu ul li:last-child { 
 
    margin-right: 0; 
 
} 
 
.menu ul li a { 
 
    text-decoration: none; 
 
    color: #fff; 
 
    font-family: 'OpenSansSemibold'; 
 
    font-size: 14px; 
 
    border-bottom: 3px solid transparent; 
 
    padding-bottom: 5px; 
 
} 
 
.menu ul li a:hover { 
 
    background: url("images/arrow-down.png")no-repeat 50% 100%; 
 
    border-bottom: 3px solid #fff; 
 
} 
 
/* additional styles */ 
 

 
.menu { 
 
    padding: 5px 20px; 
 
    background: #3272B8; 
 
} 
 
.menu:after { 
 
    display: table; 
 
    clear: both; 
 
    content: ''; 
 
} 
 
.menu li { 
 
    position: relative; 
 
} 
 
.menu li a:after { 
 
    border-left: 8px solid transparent; 
 
    border-right: 8px solid transparent; 
 
    border-top: 8px solid #fff; 
 
    width: 0; 
 
    height: 0; 
 
    content: ''; 
 
    position: absolute; 
 
    bottom: -12px; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
    visibility: hidden; 
 
} 
 
.menu li a:hover:after { 
 
    visibility: visible; 
 
}

<div class="menu"> 
 
    <ul> 
 
    <li><a href="#">HOME</a> 
 
    </li> 
 
    <li><a href="#">PROFILE</a> 
 
    </li> 
 
    <li><a href="#">ACHIEVEMENTS</a> 
 
    </li> 
 
    <li><a href="#">AWARDS</a> 
 
    </li> 
 
    <li><a href="#">PUBLICATIONS</a> 
 
    </li> 
 
    <li><a href="#">MEDIA</a> 
 
    </li> 
 
    </ul> 
 
</div>