0

アンカータグでラップされたDIVがあります。テキストを含まない空白も含めて、すべてのDIVはクリック可能です（これは私の目的では望ましいことです）。

このDIVの上に絶対的に配置された別のアンカータグがあり、z-indexが高くなっています。このアンカータグは画像をラップします（「閉じる」アイコン）。

これはすべて正しく機能しますが、ホバー時に閉じるアイコンのみを表示したい場合を除きます。現在実装されているように、閉じるアイコンは常に表示されます。私がこれを正しい方法で行っているかどうかはわかりません。さらなる問題として、私は組み込みシステムで実行していて、JavaScriptエンジンを呼び出す余裕がないため、JavaScriptを使用せずにこれを実装する必要があります。

これはWebKitでのみ機能する必要があります（より具体的には、Chromeでのみ機能する必要があります）。

誰かが私に正しい方向にナッジを与えることができますか？

これが私が使用しているCSSです：

.content {
    border-top: 1px solid #eff1f2;
    border-bottom: 1px solid #c5c5c5;
    padding: 8px 11px;
    border-left: 1px solid #c5c5c5;
}

div.content:hover {
    background-color: #d1d6de;
}

.close {
    position: absolute;
    right: 100px;
    top: 10px;
    z-index: 0;
}

これが私のHTMLです：

<div>
    <a href="native://action1/">
        <div class="content">
            <p>This is my content</p>
        </div>
    </a>
        <a href="native://action2/">
            <img class="close" src="images/close.png"/>
        </a>
</div>

これが私のソースを含むjsFiddleです。

4

1 に答える 1

4

現在のHTMLを考えると、必要なのはCSSの単純なリビジョンです。

.close {
    display: none; /* Added this to hide the element */
    /* other CSS */
}

​div:hover a .close { /* to make the element visible while hovering the parent div */
    display: block;
}

JSフィドルデモ。

CSSトランジションプロパティを使用すると、フェードイン/フェードアウトを使用することもできます。

.close {
    opacity: 0; /* to hide the element */
    -webkit-transition: opacity 0.5s linear;
    -moz-transition: opacity 0.5s linear;
    -ms-transition: opacity 0.5s linear;
    -o-transition: opacity 0.5s linear;
    transition: opacity 0.5s linear;
    /* other CSS */
}

div:hover a .close {
    opacity: 1; /* to reveal the element */
    -webkit-transition: opacity 0.5s linear;
    -moz-transition: opacity 0.5s linear;
    -ms-transition: opacity 0.5s linear;
    -o-transition: opacity 0.5s linear;
    transition: opacity 0.5s linear;
}

JSフィドルデモ。

また、HTML 5より前では、ブロックレベルの要素をインラインレベルの、要素の中にラップすることは無効であることに注意してくださいa。ただし、HTML 5では、これは有効なようです（ただし、これをサポートするW3ドキュメントはまだ見つかりません）。

于 2012-05-15T05:01:54.893 に答える