Question

好的，我有一个网页，上面有六个图标，后面跟着每个标题和按钮。目前我有它工作，当你将鼠标悬停在img-1上时，header-1和button-1都悬停相同的颜色，以便进行以下操作。我想知道我的jquery仍然是新的，并没有通过任何方式掌握它，但我呼吁我想要的每一个变化，我想知道是否有一种方法来巩固它或使它更容易，如果我想改变它但仍然有它悬停并将颜色更改为相应的div

我已经设置了一个我在jfiddle上的内容片段，你可以在我的jquery列表中看到我有很多东西做同样的事情

非常感谢任何提示或技巧，以便在我编写的任何未来网站中帮助我

http://jsfiddle.net/udegrbnr/

<div style="width:50%;float:left;">
<div class="container-1">
<div class="visible-1 upgradea-1 upgradea imgnone-1"><img     src="http://placehold.it/250/000000/000000" alt=""></div>
<div class="hidden-1 upgradea-1 upgradea otherimg-1"><img src="http://placehold.it/250/db232b/000000" alt=""></div>
</div>
<h3 class="upgradea upgrade otherimg" style="text-align: center;">Upgrade Alert</h3>
<div class="aligncenter"><a class="button small button custom fusion-button button-flat button-square button-small button-custom button-1 buttonshadow-no button-upgrade otherimg" target="_self" href="#"><span class="fusion-button-text">Learn More</span></a></div>    </div>

<div style="width:30%;float:left;">
<div class="container-1">
<div class="visible-1 contracta contractnone-1"><img src="http://placehold.it/250/000000/000000" alt=""></div>
<div class="hidden-1 contracta contractimg-1"><img src="http://placehold.it/250/344da1/000000" alt=""></div>
</div>
<h3 class="contracta contractimg" style="text-align: center;">Contract End&nbsp;Alert</h3>
<div class="aligncenter"><a class="button small button custom fusion-button button-flat button-square button-small button-custom button-3 buttonshadow-no contracta contractimg" target="_self" href="#"><span class="fusion-button-text">Learn More</span></a></div></div></div>

这里是我为我的jquery所有的6个div，因为我觉得它很多，可以简化希望

就像我看过＆＃34;这个＆＃34;命令，但不知道是否可以应用

$(function(){
     $(".upgradea , .button-upgrade").hover(function(){
   $(".upgradea , .button-upgrade").toggleClass("changecolor");

 });
    $(".button-upgrade-1").hover(function(){
    $(".button-upgrade-1").toggleClass("changecolor-1");

 });

  $(".flexa ").hover(function(){
   $(".flexa").toggleClass("changecolor-2");

});

 $(".contracta ").hover(function(){
   $(".contracta").toggleClass("changecolor-3");

});

 $(".mileagea ").hover(function(){
  $(".mileagea").toggleClass("changecolor-4");

 });

 $(".warrantya").hover(function(){
    $(".warrantya").toggleClass("changecolor-5");

 });

   $(".otherimg").hover(function(){
    $(".otherimg-1").toggleClass("changeimg");

 });

 $(".otherimg").hover(function(){
  $(".imgnone-1").toggleClass("hidden-1");

 });

   $(".fleximg").hover(function(){
   $(".fleximg-1").toggleClass("changeimg");

 });

 $(".fleximg").hover(function(){
    $(".flexnone-1").toggleClass("hidden-1");

});

   $(".contractimg").hover(function(){
   $(".contractimg-1").toggleClass("changeimg");

});

 $(".contractimg").hover(function(){
    $(".contractnone-1").toggleClass("hidden-1");

});

}）;

Answer 1

我认为没有任何理由不将CSS用于所有。如果你瞄准一个悬浮的父母的孩子，你可以随心所欲地设计它。例如：

.parent:hover h3, .parent:hover .child a {
   color: red;
}

这个CSS绝对可以进一步清理，有很多冗余的CSS规则和不必要的容器，我只是不想偏离你提供的例子太远。

http://jsfiddle.net/qk53a5q4/

Answer 2

是的，重新考虑你的CSS。

不是为每个悬停/ changeimg / changecolor状态设置一个特定的类，而是让一个类声明什么，然后为每个状态创建一个类。

HTML：

<button class="button-1 hover">Button 1</button>
<button class="button-2 hover">Button 2</button>

CSS：

.button-1.hover { /* styles */ }
.button-2.hover { /* styles */ }

jQuery的：

$('.button-1, .button-2').hover(function() {
    $(this).toggleClass('hover');
});

Jquery脚本可以使更小或更高效

2 个答案: