Question

怎么能让div的after 和 before 同时触发hover事件

Answer 1

div {    、

position: relative;    outline: none;    text-decoration: none;    color: #000;    font-size: 32px;    display: inline;    margin-left: 20px;}

div:hover::before, div:hover::after {

position: absolute; }div:hover::before { content: "\5B"; left: -20px; }

div:hover::after { content: "\5D"; right:  -20px; }；

以下为具体代码：

    DIV标签

DIV标签，称为区隔标记。作用是设定字、画、表格等的摆放位置。当你把文字、图象，或其他的放在 DIV 中，它可称作为“DIV block”，或“DIV element”或“CSS-layer”，或干脆叫“layer”。而中文我们把它称作“层次”。

DIV元素，是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。

Answer 2

同时给hover就可以同时触发了。像这样：

div {
	position: relative;
	outline: none;
	text-decoration: none;
	color: #000;
	font-size: 32px;
	display: inline;
	margin-left: 20px;
}

div:hover::before, div:hover::after { position: absolute; }
div:hover::before { content: "\5B"; left: -20px; }
div:hover::after { content: "\5D"; right:  -20px; }

 

写了个例子，可以参考下：http://sandbox.runjs.cn/show/chfdzyct