javascript - 将 a href 样式化为按钮

Question

我正在创建大量适用于所有浏览器的 HTML 组件(无论如何，这个想法是从哪里开始的:-))

现在，我想要一个按钮，并且根据this在 StackOverflow 上发帖，我不应该使用按钮，因为该按钮在单击时具有 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 不会应用新样式，它与悬停时的样式相同。除非您单击边框(如果您设法单击边框，则正确的样式会应用)。

现在，为什么我会有这种行为，它对我的​​ Control Suite 的开发至关重要，是否可以解决。

我知道使用 jQuery 可以解决这个问题，方法是在单击它时添加一个删除类，但这似乎是一个非常丑陋的解决方案，如果有“CSS 友好”的解决方案，我想使用那个。

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 而言， anchor 未被:active化。

您需要从 anchor 中取出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 事件监听器，用于打开/关闭事件类。

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