Jquery 将更改其他CSS与类链接

将所有相同的类（计数）更改为具有相同和其他类的css效果

HTML:

我尝试使用.each（）或（for），但它不起作用。

---

有什么解决方案吗？

您不需要为每个锚定标记在悬停上书写。您可以使用

^

使用属性选择的开始，它将选择类名以

imghover

开头的所有

a

元素。您可以使用悬停的锚定标记类名来查找相关元素并产生悬停效果

请参阅下面的代码

jQuery（文档）.ready（函数（$）{
$（'a[class^=imghover]'）。悬停(
函数（）{
var className=$（this.attr（'class'）；
var$image=$（'.imgval.+className+'img'）；
var$anchor=$（'.imgval.'+className）；
$image.removeClass（'img-gray'）；
$anchor.addClass（'img-text-color'）.removeClass（'no-underline'）；
$image.css（“过渡”，“所有0.6秒缓解”）；
$anchor.css（“过渡”，“所有0.6秒放松”）；
},
函数（）{
var className=$（this.attr（'class'）；
var$image=$（'.imgval.+className+'img'）；
var$anchor=$（'.imgval.'+className）；
$image.addClass（'img-gray'）；
$anchor.removeClass（'img-text-color'）.addClass（'no-underline'）；
}
);
});
.img gray{color:gray；}
.img文本颜色{color:red；}
.no下划线{颜色：绿色；}
如果我在同一个元素class=“imgval imghover1”中有一个类似class=“other imghover1”的其他类，那么我实际上无法正常工作，并且在悬停状态下无法工作。。。（如果将鼠标悬停在第二个链接一二三上）

我尝试使用[class*=imghover]，但结果相同，如果您有更多的类，内容不会改变…
您可以循环查看每个

为什么不简单地使用CSS来实现这一点？在22年的web开发中，我从未需要使用基于Javascript的hover.autoptimize_Uncaught TypeError:$不是autoptimize_bb4c7263ad5fe5d1e89e293823436dea.js的函数。36我不知道您使用的确切CSS，但我为不同的CSS添加了颜色，以便可以看到更改效果。您可以使用my code重新生成代码片段或JSFIDLE上的问题，然后我们可以查看iTunesCught TypeError：无法读取Undeineduse
jQuery（document）.ready（函数（$）{
而不是
$（document）.ready（函数（$）{
CSS3 HTML5和jQuery的最后一个属性
<a class="imghover1" href="/en/?p=1">one</a>
<a class="imghover2" href="/en/?p=2">two</a>
<a class="imghover3" href="/en/?p=3">three</a>
<!-- and more... -->
<a class="imgval imghover1" href="/en/?p=1"><img class="img-fluid img-gray rounded" alt="" src="/img/one.svg">one</a>
<a class="imgval imghover2" href="/en/?p=2"><img class="img-fluid img-gray rounded" alt="" src="/img/two.svg">two</a>
<a class="imgval imghover3" href="/en/?p=3"><img class="img-fluid img-gray rounded" alt="" src="/img/three.svg">three</a>
<!-- and more... -->

jQuery(document).ready(function($){
    totincr= $(".imgval").length;

    for(var incr=1; incr < totincr; incr++){
        $('.imghover'+incr).hover(
            function(){ 
                $('.imgval.imghover'+incr+' img').removeClass('img-gray'); 
                $('.imgval.imghover'+incr).addClass('img-text-color'); 
                $('.imgval.imghover'+incr).removeClass('no-underline'); 
                $('.imgval.imghover'+incr+' img').css("transition", "all 0.6s ease-out");
                $('.imgval.imghover'+incr).css("transition", "all 0.6s ease-out");
            },
            function(){ 
                $('.imgval.imghover'+incr+' img').addClass('img-gray');
                $('.imgval.imghover'+incr).removeClass('img-text-color'); 
                $('.imgval.imghover'+incr).addClass('no-underline'); 
            }
        );
    }      
});

jQuery(document).ready(function($){
    $('.imghover1').hover(
        function(){ 
            $('.imgval.imghover1 img').removeClass('img-gray'); 
            $('.imgval.imghover1').addClass('img-text-color'); 
            $('.imgval.imghover1').removeClass('no-underline'); 
            $('.imgval.imghover1 img').css("transition", "all 0.6s ease-out");
            $('.imgval.imghover1').css("transition", "all 0.6s ease-out");
        },
        function(){ 
            $('.imgval.imghover1 img').addClass('img-gray');
            $('.imgval.imghover1').removeClass('img-text-color'); 
            $('.imgval.imghover1').addClass('no-underline'); 
        }
    );

    $('.imghover2').hover(
        function(){ 
            $('.imgval.imghover2 img').removeClass('img-gray'); 
            $('.imgval.imghover2').addClass('img-text-color'); 
            $('.imgval.imghover2').removeClass('no-underline'); 
            $('.imgval.imghover2 img').css("transition", "all 0.6s ease-out");
            $('.imgval.imghover2').css("transition", "all 0.6s ease-out");
        },
        function(){ 
            $('.imgval.imghover2 img').addClass('img-gray');
            $('.imgval.imghover2').removeClass('img-text-color'); 
            $('.imgval.imghover2').addClass('no-underline'); 
        }
    );       
    // and more...  
});