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铺平了牛路，这已经被修改了。根据这篇HTML Doctor文章：

您可以在 HTML 5 中做的一件令人兴奋的新事情是将链接包裹在“块级”元素周围……消除重复并创建更广泛的点击区域。

简而言之，@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 回答