我的 html 代码是:
<div id="arrow">
<b>Filter By: </b>
<a href="__#" onclick="GetAllTasks();" id="id_all" style="color: #88b807;">All</a>
<input type="text" size="3" style="display: none;" id="DateFilter" />
<a href="__#" onclick="GetByDate(this);" style="vertical-align: middle;" id="cal_icon">EndDate</a>
<a href="#"__0 onclick="GetMyTasks();" id="id_myposts">My Requests</a>
</div>
我的 CSS 代码是:
a:active {font-family: Verdana, Sans-serif;
color:#FF0000;
text-decoration:none;
background: url("Images/arrow_down.png") no-repeat;
background-position:center;
}
这里我希望箭头图像出现在事件链接下方,以便它表明它是事件的.. 我已经尝试了上面的代码,但我没有得到想要的输出..
最佳答案
您可以使用纯 CSS 显示箭头(见下文),但您需要 javascript 来保持类“事件”。
Demo (点击链接)
HTML:
<b>Filter By: </b>
<a href="#">All</a>
<a href="#">EndDate</a>
<a href="#">My Requests</a>
CSS:
a {
position:relative;
}
a:active:after, a.active:after {
background: url("Images/arrow_down.png");
width:10px; /* arrow's width */
height:10px; /* arrow's height */
margin-left:-5px; /* half of arrow's width */
position:absolute;
top:100%;
right:50%;
content:" ";
}
jQuery:
$('a').on('click',function(){
$('a').removeClass('active');
$(this).addClass('active');
});
关于asp.net - 如何通过事件链接下的箭头标记突出显示页面中的选定链接?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12724743/