0

div をリンクにしようとしていますが、これは機能しますが、正しく行ったかどうかはわかりません。しかし、divのタイプの色も変えたいです。誰かが私を助けてくれませんか。少し説明してくれれば、私はとても助かります:D 学習しようとしています:)

ここにhtmlがあります

    <div class="song_feature">
        <a href="#"></a>
        <div class="song_feature_content">
            <div class="break32"></div>
            <h1>1</h1>
            <div class="break10"></div>
            <div class="break45"></div>
            <h2>Lorem ipsum title</h2>
            <div class="break10"></div>
            <p>lorem ipsum</p>
        </div>
    </div>

そしてcss

.song_feature:hover {
background-color: #B5B5B5;
cursor: pointer;
}
4

5 に答える 5

5

CSSでこれを試してみてください：

.song_feature:link {
  background-color: #000;
  cursor: pointer;
}
.song_feature:visited {
  background-color: #000;
  cursor: pointer;
}
.song_feature:hover {
  background-color: #B5B5B5;
  cursor: pointer;
}
.song_feature:active {
  background-color: #000;
  cursor: pointer;
}

マウスがその上に置かれるまで、背景色は黒になります。それに応じて色を変更するだけです。

于 2013-03-11T09:04:13.163 に答える
2

私の知る限り、あなたの問題はこれを検証することです。歴史的に、a要素はインラインであったため、技術的にはのようなブロックレベルの要素を含めることは許可されていませんでしたdiv。

私がそれらを「包含できなかった」とは言わなかったことに注意してください。ブロックレベルのリンクは、ほとんどの場合、期待どおりに機能し、検証に合格しませんでした。HTML5がカウパスを舗装することで、これが修正されました。このHTMLDoctorの記事によると：

HTML 5で実行できる新しくてエキサイティングなことの1つは、リンクを「ブロックレベル」の要素にラップすることです。重複を取り除き、クリックするヒット領域を大幅に広げます。

要するに、@Tbi45の解決策は進むべき道aですdiv。繰り返しを減らし、（HTML5として）検証し、JavaScriptを必要としません。

例については、このフィドルをチェックしてください。重要なCSSは次のとおりです。

.song_feature>a {
    display: block;
}

これにより、コンテンツ全体divがクリック可能になります。

于 2013-03-11T09:34:46.893 に答える
1

まず、a周りを包みますdiv 

<div class="song_feature">
    <a href="#">
    <div class="song_feature_content">
        <div class="break32"></div>
        <h1>1</h1>
        <div class="break10"></div>
        <div class="break45"></div>
        <h2>Lorem ipsum title</h2>
        <div class="break10"></div>
        <p>lorem ipsum</p>
    </div>
       </a>
</div>

そして、「divを入力する」というのがテキストを意味する場合(私はここで推測しています)、次のcolor:#your colorように入力します:

 .song_feature:hover {
 background-color: #B5B5B5;
  cursor: pointer;
 } 

 .song_feature:hover a {
    color:#edc844;/*some random color*/
  }

これは IE7+、最新の Mozilla、Safari、Chrome で動作します

于 2013-03-11T09:04:23.910 に答える
0

反対のことをお勧めします。

<a href="#" class="song_feature">
    <div class="song_feature_content">
        <div class="break32"></div>
        <h1>1</h1>
        <div class="break10"></div>
        <div class="break45"></div>
        <h2>Lorem ipsum title</h2>
        <div class="break10"></div>
        <p>lorem ipsum</p>
    </div>
</a>

.song_feature {
    display: block;
}

.song_feature:hover {
    background-color: #B5B5B5;
}
于 2013-03-11T09:17:33.110 に答える
0

これは、jQuery を使用すると簡単に実行できます。

HTML:

<div class="song_feature">
    <a href="#" id="hover">Hover here</a>
    <div class="song_feature_content">
        <div class="break32"></div>
        <h1>1</h1>
        <div class="break10"></div>
        <div class="break45"></div>
        <h2>Lorem ipsum title</h2>
        <div class="break10"></div>
        <p>lorem ipsum</p>
    </div>
</div>

JS:

$('#hover').hover(function(){
    $('.song_feature').css('background-color', '#f00');
});

実行: http://jsfiddle.net/cS6h8/

于 2013-03-11T09:04:08.173 に答える