如何为一次悬停3或4个元素创建javascript函数 [英] How to create javascript function for hovering 3 or 4 element at a time
本文介绍了如何为一次悬停3或4个元素创建javascript函数的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
请帮助我的任何人。我想用javascript来做到这一点。我做了一个模型，但它不好。我想用功能，所以我可以一次又一次地使用它。请帮助我。
<！DOCTYPE html>
< html>
< head>
< script type =text / javascriptsrc =jquery.js>< / script>
< style type =text / css>
.boxes {
float：left;
display：inline;
width：150px;
height：100px
}
.box1 {
width：50px;
padding：10px;
border：1px纯灰色;
margin：0px;
height：20px;
}
.box4 {
display：inline-block;
width：150px;
padding：10px;
border：1px纯灰色;
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（'back （'。'）;
$（'。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>
解决方案
使用HTML结构来确定要突出显示的内容。我不知道你确切的使用模式，但是像这样：
< div class =boxgroup>
< div class =box1 hover>< / div>
< div class =box2 hover>< a href =mylinkclass =hov> Link< / a>< / div>
< / div>
< div class =boxgroup>
< div class =box1 hover>< / div>
< div class =box2 hover>< a href =mylinkclass =hov> Link< / a>< / div>
< / div>
然后在您的jQuery中：
<$ p $（$）$（$）$（$）$（$）$（$）$（$） b $ b 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'）;
}）;
在这里，我使用 .closest（）找到 div 所在的组，然后高亮显示该组中的所有其他 .hover 项。 / p>
示例：
http://jsfiddle.net/jtbowden/HZtVP/3/
如果你想让你的div不被物理分组，还有其他方法可以做你想做的。
I want to hover 3 item at a time. when i will put cursor one of them. It should hover other two item. please can help me anyone. i want to do this with javascript. I have make a model but it is not good. i want to use with function so i can use this again and again. please help me.
<!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>
解决方案
If you group your divs by parent divs, you can use the HTML structure to determine what to highlight. I don't know your exact usage model, but something like this:
<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>
And then in your jQuery:
$(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');
});
Here, I use .closest() to find what group the div is in, and then highlight all of the other .hover items in that group.
Example:
http://jsfiddle.net/jtbowden/HZtVP/3/
If you want your divs to not be physically grouped, there are other ways to do what you want.
这篇关于如何为一次悬停3或4个元素创建javascript函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
