Question

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

查看这个小提琴，大致了解我在说什么：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问题中解决了这个问题，但它仍然不适用于我。

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

Answer 2

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

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

试图通过将鼠标悬停在一个div上来将类添加到多个div

2 个答案: