0

我在<button>一行文本的末尾插入了一个按钮（标签，但呈现为链接）。我需要在按钮和文本之间做出明确的区分，所以我使用:before带有属性的伪元素content: "—";来实现这一点。到现在为止还挺好。

这是一个例子：http: //jsfiddle.net/Anto/UPjQL/

问题是伪元素的内容就像按钮本身一样：当它悬停时，default光标变成了pointer光标并且元素被下划线。这是有道理的，但我想阻止这种行为，让它看起来就像一个普通的文本字符。

任何的想法 ？

我知道将按钮包装在一个span元素中，然后将:before属性赋予该包装器将是一个更优雅的解决方案，但在这种情况下，我负担不起。

4

2 回答 2

2

看看小提琴http://jsfiddle.net/joplomacedo/UPjQL/3/

.button-rendered-as-a-link {
    position: relative; <-------------
    border: none;
    padding: 0;
    margin: 0;
    background: none;
    -moz-border-radius: none;
    -webkit-border-radius: none;
    border-radius: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #8A89BA;
    font-weight: bold;
    left: 2em; <-------------
}
.button-rendered-as-a-link:hover {
    text-decoration: underline;
    cursor: pointer;
}

.button-rendered-as-a-link:before {
    content:" — ";
    position: absolute; <-------------
    right: 100%; <-------------
    padding: 0 5px;
    color: grey;
    cursor: default !important;
    pointer-events: none; <-------------
}

箭头代表我添加的内容。

我基本上通过使用 position: absolute 从流中删除了伪元素。这使得按钮的宽度等于没有伪元素的宽度，因此，它的下划线不超过该宽度。left 和 right 属性将它们放回原处。

然后，为了不触发按钮悬停，我将伪元素的指针事件设置为无。你可以在这里阅读更多关于它的信息https://developer.mozilla.org/en/CSS/pointer-events/。

于 2012-08-01T17:03:56.763 回答
1

在您的情况下，我只会使用 JavaScript，该insertBefore方法应该可以很好地解决问题！

var buttons = document.getElementsByClassName("button-rendered-as-a-link");
for (key in buttons)
  try{
   buttons[key].parentNode.insertBefore(document.createTextNode(" - "),buttons[key]);
  }catch(e){}// this may throw an error?
于 2012-08-01T17:03:16.560 回答