果圖:
使用場景: 使用React渲染后臺返回的數據, 遍歷以列表的形式展示, 可能內容簡要字段需要鼠標放上去才顯示的
可以借助DOM的自定義屬性和CSS偽類的attr來實現
所有代碼:
a:link 未訪問狀態
a:visited 已訪問后的鏈接
a:hover 鼠標懸停狀態
a:active 選定的鏈接
注意:a:hover 必須放在a:link和a:visited 才有效
a:active 必須放在a:hover才有效
一般放置順為:a:link,a:visited,a:hover,a:active
<style type="text/css">
a{
color:gray;
text-decoration: none;
}
a:link{
color: yellow;
}
a:hover{
color:red;
}
a:visited{
color: green;
}
a:active{
text-decoration: underline;
}
</style>
</head>
<body>
<a href="1.demo.html" target="_blank">超鏈接1</a>
<a href="1.demo.html" target="_blank">超鏈接2</a>
<a href="1.demo.html" target="_blank">超鏈接3</a>
<a href="1.demo.html" target="_blank">超鏈接4</a>
</body>
:after,可以在選定的元素后面插入一個內容。
:before,在選定元素前面插入一個內容
<style type="text/css">
a{
color:#000000;
text-decoration: none;
width: 100px;
display: inline-block;
text-align: center;
/*border: solid 1px red;*/
}
a:hover:before{
content: "[";
}
a:hover:after{
content: "]";
}
</style>
</head>
<body>
<a href="#" class="nav">首頁</a><a href="#">產品</a><a href="#">關于我們</a><a href="#">聯系我們</a>
</body>
效果圖
*請認真填寫需求信息,我們會在24小時內與您取得聯系。