Question

我试图在一个纯文本内容的文本框中将2个非常具体的字符的颜色悬停在其上。

由于它不是用HTML而是CSS编写的，所以我不能专门添加样式标签来做到这一点，而我迷路了。

我想要的是#CODESTUDENT：hover：after代码，以使悬停时的“ <”＆“>”红色。

#CODESTUDENT:after {
  content: "CODE STUDENT";
}

#CODESTUDENT:hover:after {
  content: "<CODE STUDENT>";
}

<li id="CODESTUDENT"></li>

我尝试添加颜色属性等，但无法解决此问题。

Answer 1

可以使用Javascript吗？如果是这样，这将是一种可行的方法：

for (const div of document.querySelectorAll('div')) {
  div.textContent = div.id;
}

div::before,
div::after {
  color: red;
}
div:hover::before {
  content: "<";
}
div:hover::after {
  content: ">";
}

<div id="CODESTUDENT"></div>
<div id="FOO"></div>
<div id="BAR"></div>
<div id="BAZ"></div>

Answer 2

如果您可以向HTML添加文本（取决于您的要求），则在HTML的标签内添加“ CODE STUDENT”并使用以下样式：

#CODESTUDENT:hover::before {
  content: "<";
  color:red;
}

#CODESTUDENT{
  opacity:0;
}

#CODESTUDENT:hover{
  opacity:1;
}

#CODESTUDENT:hover:after {
  content: ">";
  color: red;
}

您始终可以删除#CODESTUDENT的样式，该样式将保留在网站上。 https://codepen.io/ptr11dev/pen/dEOdxQ

Answer 3

这是一个 hacky 想法，您可以使用其他伪元素并使用margin / letter-spacing进行近似计算。

#CODESTUDENT:after {
  content: "CODE STUDENT";
}

#CODESTUDENT:hover:after {
  content: "CODE STUDENT";
  margin-left:-190px;
}
#CODESTUDENT:hover:before {
  content: "< >";
  letter-spacing:60px;
  color:red;
}

<li id="CODESTUDENT"></li>

另一个想法是考虑在after元素上使用背景色。由于您需要了解< \ >

所占用的宽度，因此还是很棘手的

#CODESTUDENT:after {
  content: "CODE STUDENT";
}

#CODESTUDENT:hover:after {
  content: "<CODE STUDENT>";
  background:
    linear-gradient(red,red) left /10px 100% no-repeat,
    linear-gradient(red,red) right/10px 100% no-repeat,
    #000;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

<li id="CODESTUDENT"></li>

Answer 4

这是另一个仅CSS 解决方案：https://jsfiddle.net/wb34yzLh/1/

本质上，我们正在使用before伪类构造单词

 #CODESTUDENT::before {
   content: "CODE STUDENT";
   color: black;
 }

然后使用前后分别在鼠标悬停时重建单词，以便分别为字母着色。

 #CODESTUDENT:hover::before {
   content: "<CODE STUDENT";
 }

 #CODESTUDENT:hover::after {
   content: ">";
 }

最后，我们将后面的唯一字母涂成红色，即>。悬停时的第一个字母为红色。

 #CODESTUDENT::after {
   color: red;
 }

#CODESTUDENT:hover::first-letter {
   color: red;
 }

Answer 5

我全心全意地同意其他使用伪元素的答案和评论，就像使用伪元素一样，但这是一种古怪的方法，无需触摸您的html：

#CODESTUDENT:after {
      content: url("data:image/svg+xml,%3Csvg height='30' width='200' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='0' y='15' fill='none'%3E&lt;%3C/text%3E%3Ctext x='15' y='15' fill='black'%3ECODE STUDENT%3C/text%3E%3Ctext x='140' y='15' fill='none'%3E&gt;%3C/text%3E%3C/svg%3E");
    }
    
  
#CODESTUDENT:hover:after {
    content: url("data:image/svg+xml,%3Csvg height='30' width='200' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='0' y='15' fill='red'%3E&lt;%3C/text%3E%3Ctext x='15' y='15' fill='black'%3ECODE STUDENT%3C/text%3E%3Ctext x='140' y='15' fill='red'%3E&gt;%3C/text%3E%3C/svg%3E");
      
    }

<li id="CODESTUDENT"></li>

通过在悬停选择器上交换包含以下svg的svg数据网址来工作：

<svg height="30" width="200" xmlns="http://www.w3.org/2000/svg">
  <text x="0" y="15" fill="none">&lt;</text>
  <text x="15" y="15" fill="black">CODE STUDENT</text>
  <text x="140" y="15" fill="none">&gt;</text>
</svg>

<svg height="30" width="200" xmlns="http://www.w3.org/2000/svg">
  <text x="0" y="15" fill="red">&lt;</text>
  <text x="15" y="15" fill="black">CODE STUDENT</text>
  <text x="140" y="15" fill="red">&gt;</text>
</svg>

使用一些额外的CSS，它甚至看起来很勉强：)。

Answer 6

您可以尝试以下方法达到目的

html：

<li id="CODESTUDENT">CODESTUDENT</li>

css：

#CODESTUDENT:hover:before {
  content:"<";
  color:red;
}

#CODESTUDENT:hover:after{
  content:">";
  color:red;
}

谢谢

悬停时在CSS写的文本框中更改特定字符的颜色

6 个答案: