Question

我想使用一些伪元素选择器（：before，：after）来包含文本或图标：悬停在其他元素中。有没有办法如何只使用伪元素选择器？我希望实际上不会更改该元素的内容，因为它的内容是从localStorage加载的。

我的愿景是在悬停在标题上时直观地添加一些可点击图标（✗，）。

<header contenteditable="true" id="title" onkeyup="store(this.id);"></header>

感谢您的建议。

Answer 1

您可以将图标添加为background-image。

 header{
 position:relative;
 }

 header:before{
 content:" ";
 position:absolute;
 top:0;
 left:0;
 width:5px;
 height:5px;
 background: url(icon.png) no-repeat ;

 }

Answer 2

我想你想要这样的东西？

您还可以在after元素或背景图片中使用fontAwesome。

＆＃13;

header {
	height:100px;
	width:100px;
	position:relative;
	background:Red;
}
header:after {
	content:"X";
	position:absolute;
	right:0;
	top:0;
	color:#fff;
	transition:0.3s ease-out;
	opacity:0;
}
header:hover:after {
	opacity:1;
}

＆＃13;

<header contenteditable="true" id="title" onkeyup="store(this.id);"></header>

＆＃13;

<强>选项2 即可。使用普通的Javascript

使用javascript添加了fontAwesome图标（beforeend =在header代码结束之前插入了＆gt;您可以使用beforebegin,afterbegin,beforeend,afterend在此处查看更多内容insertAdjacentHTML）< / p>

然后，您可以在之前添加的图标上添加点击事件。（这里我正在切换改变它的颜色的标题类

让我知道是否有帮助

＆＃13;

var newElem = document.getElementById("title");

newElem.insertAdjacentHTML('beforeend', '<i id="clickme" class="fa fa-times-circle" aria-hidden="true">&nbsp;</i>');

document.getElementById("clickme").onclick = function() {

  newElem.classList.toggle('blue');
};

＆＃13;

header {
  height: 100px;
  width: 100px;
  position: relative;
  background: Red;
  transition: 0.3s;
}

header:hover .fa {
  opacity: 1;
}

.fa {
  color: white;
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
  opacity: 0;
}

header.blue {
  background: blue;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<header contenteditable="true" id="title" onkeyup="store(this.id);"></header>

＆＃13;

Answer 3

尝试使用伪选择器中的content属性或将其添加为背景图像

用于在另一个元素

3 个答案: