3

メニューを作ろうとしています。

http://jsfiddle.net/yagogonzalez/pVcQG/

画像とテキストを同時に強調表示したい。マウスを画像の上に置くとテキストが強調表示されますが、マウスをテキストの上に置いても画像は変化しません。

ちなみに画像の枠線は で消せませんborder-style: none;。

誰でも私を助けてくれることを願っています。どうもありがとう！

<div class="iniciocenter">
    <div class="bloqueinicio">
        <a href="?page_id=7">
            <img class="imghover2" style="background-image: url('http://www.aprendicesvisuales.com/wp-content/themes/twentytwelve/images/inicio/nosotrosh.png');">nosotros
        </a>
    </div> 
    <div class="bloqueinicio">
        <a href="?page_id=8">
            <img class="imghover2" style="background-image: url('http://www.aprendicesvisuales.com/wp-content/themes/twentytwelve/images/inicio/cuentosh.png');">cuentos
        </a>
    </div> 
</div>

スタイル

.iniciocenter {
    text-align: center;
}
.imghover2 {
    width:190px;
    height:190px;
}
.imghover2:hover {
    background-position:0px -190px;
}
.handlee{
    font-family: handlee;
    font-size: 24px;
    font-size: 1.714rem;
    line-height: 1.285714286;
    margin-bottom: 14px;
    margin-bottom: 1rem;
}
.bloqueinicio {
    display:inline-block;
    text-align: center;
    font-family: handlee;
    font-size: 22px;
    font-size: 1.971rem;
    color: #365F8B;
    width:190px;
    height:50px;
}
.bloqueinicio a {
    text-decoration: none;
    color: #375F8F;
}
.bloqueinicio a:hover {
    color: #FF8000;
}
4

3 に答える 3

3

以下をCSSに追加して、テキストをホバリングしたときに画像を強調表示します。

.bloqueinicio a:hover .imghover2{
    background-position:0px -190px;
}

デモフィドル

EDIT：imgタグがsrc属性なしで（画像のプレースホルダーのようなものとして）使用されると、境界線が表示されます。ここでは、画像を背景として配置しています。したがって、私の提案は、以下に示すようなdivタグの代わりに空のタグを使用して、その境界線をなくすことです。img

<div class="bloqueinicio">
    <a href="?page_id=7">
        <div class="imghover2" style="background-image: url('http://www.aprendicesvisuales.com/wp-content/themes/twentytwelve/images/inicio/nosotrosh.png');">
        </div>
        nosotros
    </a>
</div>

デモ フィドル 2

追加情報:編集で言及されている提案を実装する前に、この SO スレッドも確認することをお勧めします。基本的に、HTML 4.01 によると、ブロック レベルの要素は 内で許可されませんでした<a>。しかし、HTML5 では完全に有効です。

于 2013-10-10T12:23:08.487 に答える
1

.imghover2:hover次のようにクラスを編集します。

.bloqueinicio a:hover img {
    background-position:0px -190px;
}

http://jsfiddle.net/mohsen4887/pVcQG/5/

于 2013-10-10T12:26:55.557 に答える
1

HOVER ルールを次のように変更します。

.bloqueinicio:hover .imghover2 {
background-position:0px -190px;
}

...

.bloqueinicio:hover a {
color: #FF8000;
}

次のフィドルを参照してください: http://jsfiddle.net/H7DFA/

于 2013-10-10T12:23:50.780 に答える