将a href元素样式设置为按钮样式

Question

我正在创建一组大型HTML组件，可以在所有浏览器中使用（这个想法从哪里开始呢 :-)）。

现在，我想要一个按钮，并根据StackOverflow上的this帖子，我不应该使用按钮，因为它在点击时会产生3D推动效果。为了消除这个问题，建议使用a href并将其样式设置为我喜欢的按钮。

所以这是HTML：

<a href="#" class="button">
    <span>Yes</span>
</a>

当然，这里是HTML：

a.button {
  color: #444;
  border: 1px solid #ababab;
  cursor: default;
  padding: 0 5px 0 5px;
  text-decoration: none;
}
a.button:hover {
  background-color: #cde6f7;
  border: 1px solid #92c0e0;
}
a:active.button {
  background-color: #92c0e0;
  border: 1px solid #2a8dd4;
}

没有什么特别复杂的。

现在，这在Google Chrome和Firefox中都可以正常工作，如此JsFiddle所示。

该按钮有3种不同的状态：

• 普通的“默认”按钮。
• 当你悬停在上面时的样式。
• 当你点击它时的样式。

现在，Internet Explorer在你点击按钮时不会应用新样式，它的样式与悬停时的样式相同。除非你点击边框（如果你成功点击边框，则会应用正确的样式）。

现在，为什么我会出现这种行为，它能被解决吗，因为这对我的控件套件的开发至关重要。

我知道可以通过在点击时添加或删除一个类来使用jQuery解决，但这似乎是一个非常丑陋的解决方案，如果有一个“CSS-Friendly”的解决方案，我想使用它。

- Complexity

---

请查看这个帖子：https://dev59.com/203Sa4cB1Zd3GeqPwZe6。它似乎是由于内部<span>元素引起的。 - devqon

或者这一个 http://stackoverflow.com/questions/14317758/anchor-with-span-dont-apply-active-effect-on-ie - devqon

Answer 1

这可能是因为CSS选择器反了：

将以下内容更改为：

a:active.button {

to

a.button:active {

Chrome等浏览器似乎不太关心这些的顺序，但IE浏览器则非常在意。

a.button {
  color: #444;
  border: 1px solid #ababab;
  cursor: default;
  padding: 0 5px 0 5px;
  text-decoration: none;
}
a.button:hover {
  background-color: #cde6f7;
  border: 1px solid #92c0e0;
}
a.button:active {
  background-color: #92c0e0;
  border: 1px solid #2a8dd4;
}

<a href="#" class="button">
    <span>Yes</span>
</a>

编辑

问题似乎在于当您单击链接时，实际上是点击了 span，在 IE 中，单击事件没有冒泡。就 IE 而言，锚点没有被 :active 激活。

您需要将 span 从锚点中移除：

a.button {
  color: #444;
  border: 1px solid #ababab;
  cursor: default;
  padding: 0 5px 0 5px;
  text-decoration: none;
}
a.button:hover {
  background-color: #cde6f7;
  border: 1px solid #92c0e0;
}
a.button:active {
  background-color: #92c0e0;
  border: 1px solid #2a8dd4;
}

<a href="#" class="button">
    Yes
</a>

编辑

如果你需要使用 span，那么唯一剩下的解决方案是使用javascript。

这段代码为所有的 .button 元素添加了一个mousedown/mouseup事件监听器，用于切换active类的开/关状态。

// vanilla JS
var anchors = document.getElementsByClassName('button');
for (var i = 0; i < anchors.length ; i++) {
    anchors[i].addEventListener("mousedown", function (event) {
        this.classList.add('active');
    }, false);
    anchors[i].addEventListener("mouseup", function (event) {
        this.classList.remove('active');
    }, false);
}

// jQuery
jQuery(document).ready(function($) {
  $('a.button').mousedown(
    function(){
      $(this).addClass('active');
    }
  )
  .mouseup(
    function(){
      $(this).removeClass('active');
    }
  );
});

我们需要将CSS中的:active行改为：

a.button:active,
a.button.active {
  background-color: #92c0e0;
  border: 1px solid #2a8dd4;
}

该代码既监听:active伪类，也监听.active类。

//pure JS solution

var anchors = document.getElementsByClassName('button');
for (var i = 0; i < anchors.length ; i++) {
    anchors[i].addEventListener("mousedown", function (event) {
        this.classList.add('active');
    }, false);
    anchors[i].addEventListener("mouseup", function (event) {
        this.classList.remove('active');
    }, false);
}

//jQuery solution
/*
jQuery(document).ready(function($) {
  $('a.button').mousedown(
    function(){
      $(this).addClass('active');
    }
  )
  .mouseup(
    function(){
      $(this).removeClass('active');
    }
  );
});
*/

a.button {
  color: #444;
  border: 1px solid #ababab;
  cursor: default;
  padding: 0 5px 0 5px;
  text-decoration: none;
}
a.button:hover {
  background-color: #cde6f7;
  border: 1px solid #92c0e0;
}
a.button:active,
a.button.active {
  background-color: #92c0e0;
  border: 1px solid #2a8dd4;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#" class="button">
    <span>Yes</span>
</a>

- Richard Parnaby-King

---

哈哈，我喜欢这个评论：“但是IE就是IE”。这不是非常正确吗？ - Sai

结果是一样的，它不起作用。尝试使用IE点击文本。按钮的样式没有改变。然而，在按钮旁边点击确实会触发按钮的样式。 - Complexity

这让我想起了一篇帖子，Chrome和Firefox正在进行全面对决，而IE则在吮吸着自己的拇指。 - unbindall

@Sai，我需要跨度，所以这不是一个有效的选项。 - Complexity

@复杂度 由于IE无法正确处理此问题，我不得不使用JavaScript来解决。我在我的答案中添加了纯JS和jQuery解决方案 :) - Richard Parnaby-King

Answer 2

这似乎是一个简单的优先级问题...a.button:hover比a:active.button更准确，因此它具有优先权。浏览器之所以不完全相同，原因仅在于它们处理平局的方式不同。

确保不同的伪类始终设置在选择器规则的相同级别将有助于解决此问题。

因此，这意味着a:active.button应该切换为a.button:active或其他内容需要切换...

- Salketer

---

我已经更新了Fiddle以匹配您所说的内容，但结果仍然相同。https://jsfiddle.net/0hgL3pdm/6/ - Complexity

另外，当我将active放在hover之前时，点击边框也无法工作，这让我认为active优先于hover。你能再看一下吗？ - Complexity

Answer 3

您可以通过添加一个

来取消按钮上的推动效果

button {
    padding:0;
}

- Eriks

---

谢谢您的评论，但这并没有回答我的问题。 - Complexity