css点击时背景变色,变蓝色怎样写

html-css021

css点击时背景变色,变蓝色怎样写,第1张

1、在html中定义一个dom元素,比如div。

2、给div添加一个onclick事件,同时定义一个响应事件的js函数。

3、在js函数中获取该div元素,通过document.getElementById()方法

4、通过元素的style属性中backgroundColor属性即可修改背景色。

示例:

//刚开始默认颜色白色

<div id="mydiv" style="width:200pxheight:200pxborder:1px solid black" onclick="changeBackground()"></div>

js函数:

<script type="text/javascript">

function changeBackground(){

    var mydiv = document.getElementById('mydiv')

    mydiv.style.backgroundColor="blue"

  }

</script>

CSS 鼠标点击穿透Div

有些时候网页中用到了一些绝对定位的Div,因为需要事先这个Div是隐藏的,但是它所在的位置会遮挡住鼠标点击事件。这个时候可以用CCS3中的pointer-events属性来解决。

//穿透该层

pointer-events:none

//恢复点击处理

pointer-events:auto

根据情况来动态修改Div的pointer-events属性即可。

例如用JQuery可以这样写:

//穿透该层

$('#dvTest').css('pointer-events', 'none')

或者

恢复点击处理

$('#dvTest').css('pointer-events', 'auto')

方法如下:

取消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)