4

私の問題を示すために、簡単な Fiddle を作成しました。http://jsfiddle.net/JTqww/

HTML:

<body>
    <div class="button">
        <a href="#">
            <img SRC="http://www.mikesfreegifs.com/main4/halloween/comehere.gif"/>
            <span class="desc">Description</span>
        </a>
    </div>
</body>

CSS:

.button {
    float: left;
    width: 100px;
}

.button a {
    background:green;
    float:left;
    z-index:-1;
}

img {
    display:inline-block;
}

.desc{
    display:inline-block;
    text-align:center;
    width:200px;
    background-color:blue;
    color:white;
}
.button:after {
    position:   absolute; 
    top:        10%;
    left:       10%; 
    content:"I destroy your anchor";
    color:red;
    position:   absolute; 
    width:      50%;
    height:     50%;


    background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */

}

ご覧のとおり、画像の上にガラスの反射効果を重ねたボタンを作成しました。以下の画像と説明をすべてアンカータグでラップする必要がありました（これらはありますが、 :after コンテンツがアンカーをブロックしているようです）。マウスを光沢のある白い領域の外に移動すると、アンカーと相互作用しますが、白い光沢のある領域内では相互作用しません。

アンカーをフローティングして z-index を変更しようとしましたが、ボタンの後に配置されたコンテンツ (「グロス」) は、アンカーがマウスオーバーとクリック イベントを受け取るのを止めているようです。

誰でもこれを修正する方法を知っていますか? どんな助けでも大歓迎です。

4

4 に答える 4

3

見栄えがするように、コードを回避します。

ここにフィドルがあります

追加された説明でもクリックが機能するようにするには、 class の代わり:afterにaorspanタグを付け.buttonます。

働くフィドル

于 2013-03-13T12:09:41.787 に答える
2

コンテンツはアンカーの一部ではないため、:afterクリックできないため、アンカーの上に配置してアンカーをクリックできると期待することはできません

リンクを変更.before:afterする.desc:afterと、クリック可能になります。

http://jsfiddle.net/JTqww/2/

スタイルをいじって、再び並べる必要があります

于 2013-03-13T11:48:02.773 に答える
0

@Pete が述べているように、生成されたコンテンツはアンカーの一部ではないため、そのようには機能しません。最も簡単な修正は、あなたdiv.buttonを完全に削除し、そのクラスを直接あなたに適用することですa:

    <a href="#" class="button">
        <img SRC="http://www.mikesfreegifs.com/main4/halloween/comehere.gif"/>
        <span class="desc">Description</span>
    </a>

生成されたコンテンツ自体はアンカーの一部であるため、クリック可能です。最初の CSS も整理する必要があります。buttonクラスは、それが適用されるものに関係なく、新しいポジショニング コンテキストを作成する必要がありますposition: relative。その後、オーバーレイは正しく配置されます -このフォークを参照してください。

于 2013-03-13T11:51:54.383 に答える
0

代わりに、直接与えることができますdiv

<div class="button">
    <a href="#">
        <img src="http://www.mikesfreegifs.com/main4/halloween/comehere.gif"/>
        <div class="overlay">I destroy your anchor</div>
        <span class="desc">Description</span>
    </a>
</div>

デモ

于 2013-03-13T11:55:05.793 に答える