Question

我正在尝试将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;
}

Answer 1

只需在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;
}

背景颜色将为黑色，直到鼠标悬停在其上方。只需相应更改颜色即可。

Answer 2

据我所知，您的问题在于验证这一点。从历史上看，a元素是内联的，因此在技术上不允许包含像div这样的块级元素。

请注意，我没有说“不能”包含它们：块级链接几乎总是按照您的预期工作，它只是不会通过验证。使用HTML5 paving the cowpaths，现在已经修改了。根据{{3}}这篇文章：

你可以在HTML 5中做的一件令人兴奋的事情是围绕“块级”元素的换行链接...删除重复并创建一个更广泛的命中区域来点击。

简而言之，@ Tbi45的解决方案是可行的方法：将a包裹在div周围。它减少了重复，验证（作为HTML5）并且不需要JavaScript。

查看HTML Doctor以获取示例。重要的CSS是：

.song_feature>a {
    display: block;
}

确保您div的所有内容都可以点击。

Answer 3

首先将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

Answer 4

如果使用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/

Answer 5

我建议你做相反的事。

<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;
}

将div设为链接并在悬停时更改内容

5 个答案: