Question

我的问题很简单。我做了一个.inactive类，没有指针事件。

我实际上是想从glyphicon或红色中显示禁止符号。

我该如何实现？

.inactive {
  color: #ccc;
  pointer-events: none;
  cursor: default;
}

.nav-tabs > li {
  background: #000;
  color: #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#" class="inactive">INACTIVE</a></li>
</ul>

Answer 1

您可以将after符号（⌽）旋转90度作为U+233D伪元素的内容

.inactive::after {
  content: "\233D";
  display: inline-block;
  color: #D02124;
  margin-left: .5em;
  font-size: 1.5rem;
  transform: rotateZ(90deg);
}

Answer 2

要更改“惯用”选项卡上的光标，请通过将红色svg添加到css中，在li元素上使用带图标的红色svg

li {
  cursor: url("data:image/svg+xml;utf8,   %3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='31' height='32' viewBox='0 0 31 32'%3E%3Ctitle%3Eblock%3C/title%3E%3Cpath style='fill: red' d='M15.36 0.64q6.4 0 10.88 4.48t4.48 10.88q0 6.336-4.48 10.848t-10.88 4.512q-6.336 0-10.848-4.512t-4.512-10.848q0-6.4 4.512-10.88t10.848-4.48zM3.712 16q0 4.224 2.624 7.36l16.448-16.448q-3.2-2.624-7.424-2.624-4.864 0-8.256 3.424t-3.392 8.288zM15.36 27.648q4.864 0 8.288-3.424t3.424-8.224q0-4.16-2.624-7.424l-16.448 16.448q3.136 2.624 7.36 2.624z'%3E%3C/path%3E%3C/svg%3E "), auto;
}

li {
  cursor: url("data:image/svg+xml;utf8,   %3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='31' height='32' viewBox='0 0 31 32'%3E%3Ctitle%3Eblock%3C/title%3E%3Cpath style='fill: red' d='M15.36 0.64q6.4 0 10.88 4.48t4.48 10.88q0 6.336-4.48 10.848t-10.88 4.512q-6.336 0-10.848-4.512t-4.512-10.848q0-6.4 4.512-10.88t10.848-4.48zM3.712 16q0 4.224 2.624 7.36l16.448-16.448q-3.2-2.624-7.424-2.624-4.864 0-8.256 3.424t-3.392 8.288zM15.36 27.648q4.864 0 8.288-3.424t3.424-8.224q0-4.16-2.624-7.424l-16.448 16.448q3.136 2.624 7.36 2.624z'%3E%3C/path%3E%3C/svg%3E "), auto;
}

.inactive {
  color: #ccc;
  pointer-events: none;
  cursor: default;
}

.nav-tabs > li {
  background: #000;
  color: #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation" ><a href="#" class="inactive">INACTIVE</a></li>
</ul>

要从字体生成svg，请转到http://fontello.com/，选择一个图标，然后单击上方的红色按钮“下载webfont”。然后解压缩文件并转到https://icomoon.io/app，然后单击“导入图标”（按钮），然后从该zip上载.svg文件，然后选择您的图标，然后单击（在页面底部）“生成svg及更多”。然后复制该svg文件的正文更改/在其中添加适当的大小/样式（fill: red）-并将其粘贴到以下脚本中以获取有效的CSS网址代码：

let str = document.querySelector('.svgData').innerHTML;

let r = str
  .replace('width="256" height="256" ', "")
  .replace(/> +/g, ">")
  .replace(/ +</g, "<")
  .replace(/>/g, "%3E")
  .replace(/</g, "%3C")
  .replace(/>/g, "%3E")
  .replace(/#/g, "%23")
  .replace(/"/g, "'")
  .replace(/ +/g, " ")
  .replace(/^ +/g, "")
  .split("\n")
  .join("");


msg.innerHTML = `<pre>cursor: url("data:image/svg+xml;utf8,${r}");</pre><br>length: ${r.length} char`

<div style="display:flex">

  <!-- PASTE you svg file inside div below -->

  <div class="svgData">

    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="31" height="32" viewBox="0 0 31 32">
<title>block</title>
<path style="fill: red" d="M15.36 0.64q6.4 0 10.88 4.48t4.48 10.88q0 6.336-4.48 10.848t-10.88 4.512q-6.336 0-10.848-4.512t-4.512-10.848q0-6.4 4.512-10.88t10.848-4.48zM3.712 16q0 4.224 2.624 7.36l16.448-16.448q-3.2-2.624-7.424-2.624-4.864 0-8.256 3.424t-3.392 8.288zM15.36 27.648q4.864 0 8.288-3.424t3.424-8.224q0-4.16-2.624-7.424l-16.448 16.448q3.136 2.624 7.36 2.624z"></path>
</svg>

  </div>
</div>

<div id="msg"></div>

禁用HTML中的标签

2 个答案: