Question

是否有css方式来制作onclick透视按钮。因此，当您单击一个按钮（文本片段）时，所选链接将获得删除text-decoration？

附图作为解释。

enter image description here

Answer 1

纯CSS模拟按钮。单击时，段落将变为红色并带有删除线。

＆＃13;

input[id=cb] {
  display: none;
}

input[id=cb]:checked~p.strikethrough {
  text-decoration: line-through;
  color: red;
}

label {
  border: thin solid darkgray;
  border-radius: 5px;
  padding: 10px;
  display: inline-block;
  margin-top: 5px;
}

＆＃13;

<input name="cb" type="checkbox" id="cb">
<label for="cb">Click me</label>
<p class="strikethrough">Paragraph 1</p>
<p>Paragraph 2</p>
<p class="strikethrough">Paragraph 3</p>

＆＃13;

Answer 2

您可以使用JS在任何元素上实现此目的。 此外，您不仅可以罢工onClick但也将被删除的内容移回其中原始状态。

$(function(){
  var $curParent, Content;
  $(document).delegate("span","click", function(){
    if($(this).closest("s").length) {
      Content = $(this).parent("s").html();
      $curParent = $(this).closest("s");
      $(Content).insertAfter($curParent);
      $(this).closest("s").remove();
    }
    else {
      $(this).wrapAll("<s />");
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<span>click</span>/<span>click</span>
</div>

Answer 3

仅使用CSS是不可能的，因为a:visited只允许更改：

color
background-color
border-color（及其子属性）
outline-color
填充和描边属性的颜色部分

<子> Source

由于用户text-decoration，不允许使用

privacy issues样式。

使用jQuery解决方案：

$("a").click(function() {
  $(this).css("text-decoration", "line-through");
});

＆＃13;

$("a").click(function() {
  $(this).css("text-decoration", "line-through");
});

＆＃13;

a {
  text-decoration: none;
  color: black;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#">link</a>

＆＃13;

Answer 4

使用wrap函数，我们可以在内部元素周围插入HTML结构，如下所示：

$('input[type=button]').click(function() {
  $('a').wrap("<strike>");
  //$('a').css("text-decoration", "line-through");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type='button' id='but' value='Click'>
<a href="#">link</a>

Answer 5

＆＃13;

button:visited,
button:focus,
button:active {
  text-decoration: line-through;
}

＆＃13;

<html>

<head></head>

<body>
  <button>strike text onclick</button>
</body>

</html>

＆＃13;

点击时打击

5 个答案: