如何为每次悬停3或4个元素创建javascript函数_Javascript_Jquery_Function

如何为每次悬停3或4个元素创建javascript函数

javascript jquery function

如何为每次悬停3或4个元素创建javascript函数,javascript,jquery,function,Javascript,Jquery,Function,我想一次悬停3个项目。当我将光标放在其中一个位置时。它应该悬停在另外两个项目上。任何人都可以帮助我。我想用javascript实现这一点。我做了一个模型，但不好。我想和函数一起使用，这样我可以一次又一次地使用它。请帮帮我 <!DOCTYPE html> <html> <head> <script type="text/javascript" src="jquery.js"></script> <style type="t

我想一次悬停3个项目。当我将光标放在其中一个位置时。它应该悬停在另外两个项目上。任何人都可以帮助我。我想用javascript实现这一点。我做了一个模型，但不好。我想和函数一起使用，这样我可以一次又一次地使用它。请帮帮我

<!DOCTYPE html>
<html>
<head>

  <script type="text/javascript" src="jquery.js"></script>

<style type="text/css">
.boxes {
    float: left;
    display: inline;
    width:150px;
    height:100px
}
.box1 {
    width:50px;
    padding:10px;
    border:1px solid gray;
    margin:0px;
    height: 20px;
}

.box4 {
    display: inline-block;
    width:150px;
    padding:10px;
    border:1px solid gray;
    height: 100px;
}


</style>
<script>
$(document).ready(function(){
    // box 1
    $('.box1').mouseover(function(){
        $('.box1').css('background-color', '#F7FE2E');
        $('.box4').css('background-color', '#F7FE2E');
        $('.hov').css('color', '#0f0');

    });
    $('.box1').mouseout(function(){
        $('.box1').css('background-color', '#FFF');
        $('.box4').css('background-color', '#FFF');
        $('.hov').css('color', '#fff');

    });
       $('.box4').mouseover(function(){
        $('.box4').css('background-color', '#F7FE2E');
        $('.box1').css('background-color', '#F7FE2E');
        $('.hov').css('color', '#0f0');

    });
    $('.box4').mouseout(function(){
        $('.box4').css('background-color', '#FFF');
        $('.box1').css('background-color', '#FFF');
        $('.hov').css('color', '#fff');

    });

});

</script>
</head>

<div class="boxes">
    <div class="box1">Box 1</div>

</div>
<div class="box4"><a href="#" class="hov">box4</a> </div>
<br/>
<div class="boxes">
    <div class="box1">Box 1</div>

</div>
<div class="box4"><a href="#" class="hov">box4</a> </div>

</body>
</html>


.盒子{
浮动：左；
显示：内联；
宽度：150px；
高度：100px
}
.box1{
宽度：50px；
填充：10px；
边框：1px纯色灰色；
边际：0px；
高度：20px；
}
.box4{
显示：内联块；
宽度：150px；
填充：10px；
边框：1px纯色灰色；
高度：100px；
}
$（文档）.ready（函数（）{
//方框1
$（'.box1'）.mouseover（函数（）{
$（'.box1'）.css（'background-color'，'F7FE2E'）；
$（'.box4'）.css（'background-color'，'F7FE2E'）；
$（'.hov'）.css（'color'，'0f0'）；
});
$（'.box1'）.mouseout（函数（）{
$（'.box1'）.css（'background-color'，'#FFF'）；
$（'.box4'）.css（'background-color'，'#FFF'）；
$（'.hov'）.css（'color'，'#fff'）；
});
$（'.box4'）.mouseover（函数（）{
$（'.box4'）.css（'background-color'，'F7FE2E'）；
$（'.box1'）.css（'background-color'，'F7FE2E'）；
$（'.hov'）.css（'color'，'0f0'）；
});
$（'.box4'）.mouseout（函数（）{
$（'.box4'）.css（'background-color'，'#FFF'）；
$（'.box1'）.css（'background-color'，'#FFF'）；
$（'.hov'）.css（'color'，'#fff'）；
});
});
方框1


方框1

使用映射javascript对象

并使用类“like”选择器将函数绑定到类以“.box”开头的元素

例如：

如果按父div对div进行分组，则可以使用HTML结构来确定要突出显示的内容。我不知道您的确切使用模式，但大致如下：

<div class="boxgroup">
    <div class="box1 hover"></div>
    <div class="box2 hover"><a href="mylink" class="hov">Link</a></div>
</div>

<div class="boxgroup">
    <div class="box1 hover"></div>
    <div class="box2 hover"><a href="mylink" class="hov">Link</a></div>
</div>

在这里，我使用

.closest（）

查找

div

所在的组，然后突出显示该组中的所有其他

。悬停项
例如：

如果您不希望对div进行物理分组，那么还有其他方法可以实现您的目的。为什么要这样做？对于用户来说，这似乎非常违反直觉。
<div class="boxgroup">
    <div class="box1 hover"></div>
    <div class="box2 hover"><a href="mylink" class="hov">Link</a></div>
</div>

<div class="boxgroup">
    <div class="box1 hover"></div>
    <div class="box2 hover"><a href="mylink" class="hov">Link</a></div>
</div>

$(document).on('mouseover', '.hover', function () {
    var boxgroup = $(this).closest('.boxgroup');
    boxgroup.find('.hover').addClass('hovercolor');
    boxgroup.find('.hov').css('color', '#0f0');
}).on('mouseout', '.hover', function () {
    var boxgroup = $(this).closest('.boxgroup');
    boxgroup.find('.hover').removeClass('hovercolor');
    boxgroup.find('.hov').css('color', '#000');
});