2

私はdivを持っています

<div id="box">
content content
content content <a href="#">content</a>content
</div>

リンクの上にマウスを置くと、リンクの色とdivの背景色を変更したいと思います。cssのみを使用していますが、cssのみを使用することは可能ですか？私を助けてください。

4

6 に答える 6

4

parentターゲット要素のCSSセレクターはありません。しかし、いくつかのトリックで欲望の効果を達成することができます。このように書く：

#box a:hover:after{
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:red;
    z-index:-1;
}

これをチェックしてくださいhttp://jsfiddle.net/V4qDm/3/

于 2012-06-19T07:45:13.490 に答える
2

これが実用的なフィドルです：

http://jsfiddle.net/V4qDm/2/

このCSSを追加する

#box.hover{background:#cb2326;}
#box a{display:inline-block;}
#box a:hover{color:#fff;}

このJqueryを追加します：

​$('a').hover(function(){
    $(this).parent().toggleClass('hover');
});​​​
于 2012-06-19T06:56:03.500 に答える
1

リンクの色は次を使用して変更できます

   a:hover{color:#ccc;}

ただし、css3またはcss2を使用して子から親要素にアクセスすることはできません。

これは、css4で$signとともに提供されています。

$div>a:hover{background:#ccc;}

しかし現在、それをサポートしているブラウザはありません

親の背景を変更するには、JavaScriptを調べる必要があります。

于 2012-06-19T06:51:19.090 に答える
1

divで使用でき:hoverます。これは、現在ユーザーが非常に少ないIE6を除くすべてのブラウザーでサポートされています。

div#box:hover {
background-color: #whatever;
}

編集：もちろん、私はその質問を完全に誤解しました。お詫びします！他の人が指摘しているように、子要素がCSSでの親の外観を変更することはできません（少なくともCSS4まで）。親がトリガーとして機能することが許容される場合は、上記が機能します。もちろん、リンクの外観を同時に変更することもできます。

div#box:hover a {
color: #somecolour;
}

*） statcounter.comによると0.66％

于 2012-06-19T06:56:52.797 に答える
0

javascriptの使用を検討する必要があります。これにより、単純なタスクが作成されます。単純！

ヘッダーに以下を追加します。

<script type="text/javascript">
    function changeDivAndLink(linkid, divid){
        document.getElementById(linkid).setColor(...);
        document.getElementById(divid).setBackground(...);
    }
</script>

次に、コードに対して行う必要があるのは、マウスオーバーを追加することだけです。

<div id="box">
    content content
    content content <a href="#">content</a>content
</div>

スクリプトを使用せずに実際にやりたいと思っていたのは知っていますが、最近ではjavascriptが広くサポートされているため、JavaScriptをサポートしていないブラウザの割合はごくわずかです。

これが一部の人に役立つことを願っています。

于 2012-06-19T06:56:50.833 に答える
0

div全体をリンクとして機能させるには、アンカータグを次のようdisplay: block; に設定します。次に、アンカータグの高さを100％に設定します。divタグの高さを固定サイズに設定します。

例：

    <html>
<head>
        <title>sample link</title>

        <style type="text/css">
        .container {
                border: 1px solid #C9F;
                width: 50%;
                height: 20px;
        }

        .container a {
                display: block;
                background: #FC6;
                height: 100%;
                text-align: center;
        }

        .container a:hover {
                background: #996699;
                color:#FFF;
        }

        </style>

</head>
<body>

        <div class="container">
                <a href="http://www.stackoverflow.com">Stack Overflow</a>
        </div>


</body>
 </html>
于 2012-06-19T06:59:23.630 に答える