1

.logoサイトに と を含む div があり.iconます.text。また、実際のロゴ イメージの一部ではありませんが、.links下にあるも含まれています。.textとの両方.iconに.text子が.imageあり.image-hover、背景イメージのフェード効果 (ロゴ用) を作成するために使用します。

HTML:

<div class="logo">
    <div class="icon"><span class="image"></span><span class="image-hover"></span></div>
    <div class="text"><span class="image"></span><span class="image-hover"></span></div>
    <div class="links">Links</div>
</div>

CSS:

.icon:hover .image {
    opacity: 0;
}
// opposite for .image-hover

.text:hover .image {
    opacity: 0;
}
// opposite for .image-hover

問題は、アイコンとテキストが独立しているため、見栄えが悪いことです。.links影響を与えたくない（だから.logo:hover使えない）。.icon:hover影響を与え.text .imageたり、その逆を行うことは可能ですか?

http://jsfiddle.net/7kj7G/

EDIT 私はすでにJSW189の提案を試みました。は.links下.textにあり.icon、両方と同じ高さです。それらをラップしようとすると、ボックスのサイズは のみで.text、フルは含まれません.icon。

EDIT JSW189の提案の問題は、ボックスを小さくする.iconのz-indexだけだったようです。

4

2 に答える 2

1

あなたはラップすることができます.icon。text別の div で、:hoverその div の疑似クラスを使用します。こうすることで、ユーザーが または のいずれかにカーソルを合わせると、すべての:hoverスタイルが表示されます。.icon.text

HTML:

<div class="logo">
    <div class="wrap-icon-and-text">
        <div class="icon"><span class="image"></span><span class="image-hover"></span></div>
        <div class="text"><span class="image"></span><span class="image-hover"></span></div>
    </div>
    <div class="links">Links</div>
</div>

CSS:

.wrap-icon-and-text:hover {
    /* styles here */
}
于 2013-02-17T17:05:46.840 に答える
0 
<div class="logo">
   <div class="icon"><span class="image"></span><span class="image-hover"></span></div>
   <div class="text"><span class="image"></span><span class="image-hover"></span></div>
   <div class="links">Links</div>
</div>

.icon .imageAND.text .imageホバーに影響するセレクター

.logo:hover .icon .image
{
    opacity: 0;
}

.logo:hover .text .image
{
    opacity: 0;
}
于 2013-02-17T17:18:30.260 に答える