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 プロパティによって元の位置に戻されます。

次に、ボタンのホバーをトリガーしないように、疑似要素のポインター イベントを none に設定します。詳細については、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 に答える