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种不同的状态：

普通＆＃39;默认＆＃39;按钮。
悬停在它上面的一种风格。
点击它时的样式。

现在，当您单击按钮时，Internet Explorer不会应用新样式，它与鼠标悬停时的样式相同。除非您单击边框（如果您设法单击边框，则表示正确的样式适用）。

现在，为什么我有这种行为并且可以解决，因为它对我的Control Suite的开发至关重要。

我知道可以通过在点击它时添加一个删除类来解决jQuery，但这似乎是一个非常难看的解决方案，如果有＆＃39; CSS-Friendly＆＃39 ;解决方案，我想用那个。

Answer 1

这可能是因为CSS选择器是向后的：

变化：

a:active.button {

到

a.button:active {

Chrome等人似乎并不关心这些订单是什么，但是IE就是IE。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

修改

问题似乎是当您点击链接时，实际上是在点击span，而在IE中，点击事件并未冒泡。就IE而言，锚点不是:active。

您需要将span从锚点中取出：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

修改

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

这段代码为所有.button个元素添加了一个mousedown / mouseup事件监听器，可以打开/关闭活动类。

// 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类。

＆＃13;

//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');
    }
  );
});
*/

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

这似乎是一个简单的优先问题... a.button:hover比a:active.button更准确，因此它具有优先权。浏览器并非所有行为完全相同的原因仅仅是因为它们处理不同的关系。

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

所以，这意味着a:active.button应该切换到a.button:active或其他人切换......

Answer 3

您可以通过添加

删除按钮上的推送效果

button {
    padding:0;
}

将a href设为按钮

3 个答案:

修改

修改