0

基本上，我有一个由五个不同颜色的垂直条纹组成的页面。这些最终将成为不同部分或类似内容的链接。

查看这个小提琴以大致了解我在说什么：http: //jsfiddle.net/nolbear/4fea3/

这是我的 JavaScript：

$('#banner1').hover(function() {
  $(this).toggleClass('forty');
  $('#banner2').toggleClass('twenty');
  $('#banner3').toggleClass('twenty');
  $('#banner4').toggleClass('ten');
  $('#banner5').toggleClass('ten');     
});

我试图得到它，以便当您将鼠标悬停在顶部条纹上时，它会变大，而所有其他条纹都会变小以进行补偿。条纹应始终占据页面的整个高度（这就是我使用百分比的原因）。

我不明白为什么我编写的代码不起作用，我直接从其他已回答的 StackOverflow 问题中获取它，但它仍然对我不起作用。

4

2 回答 2

1

第一个问题是你没有在你的小提琴中设置 jQuery

其次，您通过覆盖类值的 id 设置高度，因此我按类设置它们的样式。

http://jsfiddle.net/4fea3/4/

<div id="banner1" class="banner">
</div>

<div id="banner2" class="banner">
</div>

<div id="banner3" class="banner">
</div>

<div id="banner4" class="banner">
</div>

<div id="banner5" class="banner">
</div>

.banner {
    width: 100%;
    height: 20%;
    transition: all 0.2s ease 0.0s;
    -moz-transition: all 0.2s ease 0.0s;
    -webkit-transition: all 0.2s ease 0.0s;
    -o-transition: all 0.2s ease 0.0s;
    -ms-transition: all 0.2s ease 0.0s;
    overflow: hidden;
}
于 2013-07-28T03:28:30.057 回答
0

您的代码正在运行，只是 CSS 不起作用。您已应用于height: 20%每个横幅，然后height: x%应用于您希望更改横幅高度的每个 css 类。不幸的是，第一个height: 20%将覆盖这一点。我曾经!important在小提琴中修复它：http: //jsfiddle.net/4fea3/3/

理想情况下，您会避免在!important添加类时更新样式以正确覆盖。

于 2013-07-28T03:28:18.247 回答