将aa href设置为按钮

Question

我正在创建一组可在每个浏览器中运行的大量HTML组件(无论如何,这个想法始于:-))

现在,我想要一个按钮,根据StackOverflow 上的这篇文章,我不应该使用按钮,因为那个按钮具有3D推送效果.为了删除那个,建议是使用a 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;
}

没有什么真的很复杂

现在,这可以在谷歌Chrome和Firefox中运行,就像这个JsFiddle演示的那样.

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

• 一个普通的"默认"按钮.
• 悬停在它上面的一种风格.
• 点击它时的样式.

现在,当您单击按钮时,Internet Explorer不会应用新样式,它与悬停时的样式相同.除非您单击边框(如果您设法单击边框,则应用正确的样式).

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

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

Answer 1

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

更改:

a:active.button {

至

a.button:active {

Chrome等人似乎并不关心这些订单的顺序,但IE就是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.

这段代码将mousedown/mouseup事件监听器添加到所有.button可以打开/关闭活动类的元素.

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

我们:active将css 的行更改为:

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>