CSS怎么在点击a标签是显示东西

html-css019

CSS怎么在点击a标签是显示东西,第1张

css:层叠样式表是一种用来表现HTML或XML等文件样式的计算机语言。能够做到网页表现与内容分离的一种样式设计语言。

但是想要有交互特效,比如点击、拖曳、失焦、聚焦等特效都是需要结合js、jq来实现的。因此没办法做到点击a标签达到显示a内部其他dom内容。

不过css有个hover能实现鼠标移动到a标签上展示其下内容。比如最常见的鼠标经过展示下拉框,使用纯css就能达到,主要原因就是使用hover经过将下面的ul.submenu给显示出来

例如

<a href="#" id="a1">xxx

<ul style="display:none/*一开始是隐藏的,为了说明直接写在节点上*/">

<li><a href="#">111</a></li>

......

</ul>

</a>

css:

#a1:hover ul{ display:block/*鼠标经过将ul显示出来*/}

方法如下:

取消a标签在移动端点击时的蓝色:

-webkit-tap-highlight-color: rgba(255, 255, 255, 0)

-webkit-user-select: none

-moz-user-focus: none

-moz-user-select: none

使用图片作为a标签的点击按钮时,当触发touchstart的时候,往往会有一个灰色的背景:

a,a:hover,a:active,a:visited,a:link,a:focus{

-webkit-tap-highlight-color:rgba(0,0,0,0)

-webkit-tap-highlight-color: transparent

outline:none

background: none

text-decoration: none

}

改变选中内容的背景颜色:

::selection {

background: #FFF

color: #333

}

::-moz-selection {

background: #FFF

color: #333

}

::-webkit-selection {

background: #FFF

color: #333

}

去除ios input框点击时的灰色背景:

-webkit-tap-highlight-color:rgba(0,0,0,0)