1

私が抱えている問題は、ボタンの上にマウスを置くと、実際のブロックのすべてではなく、ボタンの特定の部分だけがホバー/クリック可能な状態をトリガーすることです。なぜ何かアイデアはありますか？

これが使用されているサイトです：http：//www.revival.tv/turningpoint/#about-wrap

これがcssです

#facebook, #twitter {
float: left;
display: block;
height: 25px;
width: 65px;
color:#fff;
line-height: 25px;
text-align: center;
margin-right: 7px;
border-radius:7px;
cursor: pointer;
opacity:1;
background-color: #DA178D;
background-image: -webkit-gradient(linear, left top, left bottom, from(#DA178D), to(#c3147d));
background-image: -webkit-linear-gradient(top, #DA178D, #c3147d);
background-image: -moz-linear-gradient(top, #DA178D, #c3147d);
background-image: -ms-linear-gradient(top, #DA178D, #c3147d);
background-image: -o-linear-gradient(top, #DA178D, #c3147d);
background-image: linear-gradient(to bottom, #DA178D, #c3147d);
}
#facebook:hover, #twitter:hover {
opacity:.7;
}
4

2 に答える 2

1

問題は、div#fbcount.countがあなたよりも多くのz-indexを持ちa#facebook、あなたのdiv#twcount.countが。よりも多くのz-indexを持っていることa#twitterです。それぞれのリンクより下になるように調整します（z-indexをリンクよりも小さい値に減らします）。現在のところ、ホバーイベントはdivによって登録されており、マウスをその上に置いたときのリンクではありません。

于 2012-07-06T03:50:36.413 に答える
1

原因は、左側の位置が -100% のセレクター:beforeです。いずれにせよ、セレクターは IE では機能しません (気になる場合)。.count:before

別の解決策は、三角形に対して個別の DIV を作成し、それらを左にフロートさせて完全に整列させることです。

編集:ああ...:beforeこの場合、疑似要素は親のプロパティを継承します.count。その小さな三角形の実際の幅は 35px です。

解決策：少しハックです...しかし、私は:beforeon.countを:afteron#facebookとに移動しました#twitter。少しポジショニングして、それはうまくいくようです。テキストを垂直方向に揃えるには、line-heightを と同じに設定できますheight。

JSFiddle: http://jsfiddle.net/XmYwe/1/

お役に立てれば！

于 2012-07-06T03:59:04.193 に答える