Javascript 为单独的div创建onmouseover函数

好的，我会尽量把这件事说清楚。友善一点，我对JavaScript非常陌生

我有一个叫做nav的div容器，它有五个导航按钮，它们都是并排浮动的。在这个容器下，我有一个名为underbar的div容器，它只是每个nav元素下的一个纯色条。当有人将鼠标悬停在导航div上时，该元素的底部颜色会发生变化。现在，我有你在下面看到的，它工作正常

<div id="container">
<div id="nav">
<div id="one" onmouseover="document.getElementById('ubone').style.background='gray'" onmouseout="document.getElementById('ubone').style.background='white';"><a href="one.html">One</a>    </div><!-- end of first nav -->
<div id="two" onmouseover="document.getElementById('ubtwo').style.background='gray'" onmouseout="document.getElementById('ubtwo').style.background='white';"><a href="two.html">Two</div><!-- end of second nav -->
<div id="three" onmouseover="document.getElementById('ubthree').style.background='gray'" onmouseout="document.getElementById('ubthree').style.background='white';"><a href="three.html">Three</div><!-- end of third nav -->
<div id="four" onmouseover="document.getElementById('ubfour').style.background='gray'" onmouseout="document.getElementById('ubfour').style.background='white';"><a href="four.html">Four</div><!-- end of fourth nav -->
<div id="five" onmouseover="document.getElementById('ubfive').style.background='gray'" onmouseout="document.getElementById('ubfive').style.background='white';"><a href="five.html">Five</div><!-- end of fifth nav -->
</div><!-- end of nav div -->

<div id="underbar">
<div id="ubone"></div><!-- end of first nav -->
<div id="ubtwo"></div><!-- end of second nav -->
<div id="ubthree"></div><!-- end of third nav -->
<div id="ubfour"></div><!-- end of fourth nav -->
<div id="ubfive"></div><!-- end of fifth nav -->
</div><!-- end of underbar div -->

</div><!-- end of container div-->

两个
三
四
五

---

这个很好用，是的。然而，我绝对不愿意一个接一个地编辑这些内容。使用javascript函数/jquery（最好）简化这个过程的最简单方法是什么，同时能够对多个div id进行简化？想法/意见？谢谢

这针对的是

div

，它是

#nav

元素的直接子元素

$(document).ready(function(){
    $('#nav > div').mouseover(function(){

        $('#ub' + this.id).css('backgroundColor', 'grey');

    }).mouseout(function(){

        $('#ub' + this.id).css('backgroundColor', 'white');

    });
});

如果您想要纯Javascript解决方案，请尝试以下方法：

window.onload = function(){

    var elements = document.querySelectorAll('#nav > div');

    for(var i=0; i<elements.length; i++)
    {
        elements[i].onmouseover = function(){
            document.querySelector('#ub' + this.id).style.backgroundColor = 'grey';
        };
        elements[i].onmouseout = function(){
            document.querySelector('#ub' + this.id).style.backgroundColor = 'white';
        };
    }
}

window.onload=function（）{
var elements=document.queryselectoral（'#nav>div'）；
对于（var i=0；i编辑：误读了问题。这是我修改后的答案。

我建议使用语义更正确的标记。由于您的导航实际上是一个链接列表，因此通常标准做法是将其样式设置为：

<ul id="nav">
  <li rel="#ubone"><a href="mypage1.html">One</a><li>
  <li rel="#ubtwo"><a href="mypage2.html">Two</a><li>
  <li rel="#ubthree"><a href="mypage3.html">Three</a><li>
  <li rel="#ubfour"><a href="mypage4.html">Four</a><li>
</ul>

要回答原始问题，可以使用jQuery添加如下行为：

$(document).ready(function(){
  // The document ready waits for the document to load before adding JS to the elements
  // We use the css selector for our element to select it, then use the hover function to apply a behaviour
  $('#nav li').hover(function(){
    // This function executes when the mouse hovers over the li
    var target = $(this).attr('rel');
    $(target).css({
      'background' : '#ccc'
    });
  }, function(){
    // This function executes when the mouse leaves the li
    var target = $(this).attr('rel');
    $(target).css({
      'background' : '#fff'
    });        
  });
});

如果您需要更多关于jQuery的帮助，请前往他们有一些优秀深入文档的地方

N.B.-在没有看到您正在应用的实际样式的情况下，我不能确定，但听起来您的下边框也可以通过添加一个底部边框，然后使用“：hover”css伪类更改悬停时的颜色来完成。
提供的所有解决方案都使用jQuery来实现您想要的功能。使用纯Javascript（要快得多），请使用以下方法：

<script type="text/javascript">
function hoverMenu(elem)
{
    document.getElementById('ub' + elem.id).style.background='gray';
}

function blurMenu(elem)
{
    document.getElementById('ub' + elem.id).style.background='white';
}
</script>

<div id="container">
    <div id="nav">
        <div id="one" onmouseover="hoverMenu(this);" onmouseout="blurMenu(this);"><a href="one.html">One</a>    </div><!-- end of first nav -->
        <div id="two" onmouseover="hoverMenu(this);" onmouseout="blurMenu(this);"><a href="two.html">Two</div><!-- end of second nav -->
        <div id="three" onmouseover="hoverMenu(this);" onmouseout="blurMenu(this);"><a href="three.html">Three</div><!-- end of third nav -->
        <div id="four" onmouseover="hoverMenu(this);" onmouseout="blurMenu(this);"><a href="four.html">Four</div><!-- end of fourth nav -->
        <div id="five" onmouseover="hoverMenu(this);" onmouseout="blurMenu(this);"><a href="five.html">Five</div><!-- end of fifth nav -->
    </div><!-- end of nav div -->

    <div id="underbar">
        <div id="ubone"></div><!-- end of first nav -->
        <div id="ubtwo"></div><!-- end of second nav -->
        <div id="ubthree"></div><!-- end of third nav -->
        <div id="ubfour"></div><!-- end of fourth nav -->
        <div id="ubfive"></div><!-- end of fifth nav -->
    </div><!-- end of underbar div -->
</div><!-- end of container div-->


功能悬停菜单（elem）
{
document.getElementById（'ub'+elem.id.）.style.background='gray'；
}
功能菜单（elem）
{
document.getElementById（'ub'+elem.id.）.style.background='white'；
}
两个
三
四
五
这里有一个答案：

$(document).ready(function() {
    $('#nav div').hover(
    function() {
        $('#ub' + this.id).css('background-color', 'grey');
    }, function() {
        $('#ub' + this.id).css('background-color', 'white');
    });
});​

<div id="container">
    <div id="nav">
        <div id="one"><a href="one.html">One</a></div><!-- end of first nav -->
        <div id="two"><a href="two.html">Two</a></div><!-- end of second nav -->
        <div id="three"><a href="three.html">Three</a></div><!-- end of third nav -->
        <div id="four"><a href="four.html">Four</a></div><!-- end of fourth nav -->
        <div id="five"><a href="five.html">Five</a></div><!-- end of fifth nav -->
    </div><!-- end of nav div -->
    <div id="underbar"> 
        <div id="ubone"></div><!-- end of first nav -->
        <div id="ubtwo"></div><!-- end of second nav -->
        <div id="ubthree"></div><!-- end of third nav -->
        <div id="ubfour"></div><!-- end of fourth nav -->
        <div id="ubfive"></div><!-- end of fifth nav -->   
    </div><!-- end of underbar div -->   
</div><!-- end of container div-->​


而使用.hover（）

就像一个速记，将

.mouseenter（）

和

.mouseleave（）

组合成一个处理程序

因此，

mouseenter

和

mouseleave

比

mouseover

和

mouseout

更可靠，它们往往会闪烁

jQuery:

$(document).ready(function() {
    $('#nav div').hover(
    function() {
        $('#ub' + this.id).css('background-color', 'grey');
    }, function() {
        $('#ub' + this.id).css('background-color', 'white');
    });
});​

<div id="container">
    <div id="nav">
        <div id="one"><a href="one.html">One</a></div><!-- end of first nav -->
        <div id="two"><a href="two.html">Two</a></div><!-- end of second nav -->
        <div id="three"><a href="three.html">Three</a></div><!-- end of third nav -->
        <div id="four"><a href="four.html">Four</a></div><!-- end of fourth nav -->
        <div id="five"><a href="five.html">Five</a></div><!-- end of fifth nav -->
    </div><!-- end of nav div -->
    <div id="underbar"> 
        <div id="ubone"></div><!-- end of first nav -->
        <div id="ubtwo"></div><!-- end of second nav -->
        <div id="ubthree"></div><!-- end of third nav -->
        <div id="ubfour"></div><!-- end of fourth nav -->
        <div id="ubfive"></div><!-- end of fifth nav -->   
    </div><!-- end of underbar div -->   
</div><!-- end of container div-->​

您还缺少一些

标记

HTML:

$(document).ready(function() {
    $('#nav div').hover(
    function() {
        $('#ub' + this.id).css('background-color', 'grey');
    }, function() {
        $('#ub' + this.id).css('background-color', 'white');
    });
});​

<div id="container">
    <div id="nav">
        <div id="one"><a href="one.html">One</a></div><!-- end of first nav -->
        <div id="two"><a href="two.html">Two</a></div><!-- end of second nav -->
        <div id="three"><a href="three.html">Three</a></div><!-- end of third nav -->
        <div id="four"><a href="four.html">Four</a></div><!-- end of fourth nav -->
        <div id="five"><a href="five.html">Five</a></div><!-- end of fifth nav -->
    </div><!-- end of nav div -->
    <div id="underbar"> 
        <div id="ubone"></div><!-- end of first nav -->
        <div id="ubtwo"></div><!-- end of second nav -->
        <div id="ubthree"></div><!-- end of third nav -->
        <div id="ubfour"></div><!-- end of fourth nav -->
        <div id="ubfive"></div><!-- end of fifth nav -->   
    </div><!-- end of underbar div -->   
</div><!-- end of container div-->​

​

Pure CSS无法修改另一个元素，只能修改悬停元素。当您的答案被隐藏时，请使用delete/undelete链接。我很抱歉，就像我说的我误读了这个问题一样。感谢Sparky672的提示，我仍然了解Stackoverflow的诀窍，所以下次将记住这一点。使用jQuery，您可以删除所有内联JavaScript。您还有无效的HTML…您的大多数链接上都缺少结束标记

。请不要用您的答案和一个全新的问题编辑您的问题…它会使您以前的所有答案都过时，并导致巨大的混乱。Chokey我想我以后可以避免这样做。很抱歉造成混乱。工作非常完美。我唯一的问题是document.getElementById（'ub'引用Matheus:“纯Javascript（速度快得多）”~如果你要发表这样的声明，请量化。速度要快多少，这会对用户体验产生实际影响？这并不比最初的版本干净多少。纯JS并不意味着你必须对事件处理程序过于粗暴。@user1504591不。这些函数会为你自动执行。@Sparky672我就是不能使用它在项目中包含一个库只是为了完成一个简单的任务，因为他已经在使用Vanilla JS。当然，纯Javascript会更快。不仅在处理方面，而且在带宽方面。想要数字吗？jQuery

.mouseenter（）

和

.mouseleave（）

会更好。或者

.hover（）

将它们结合在一起。我如何将此代码应用于div？我链接了谷歌托管的jquery。我还用上面的代码创建了一个mouse-events.js javascript页面，并将其链接到我的html页面。我只是不确定还需要做什么？TYVM！非常清晰的回答，正是我想要的。你不适用于div…这段代码已经针对了

div

。@user1504591我也用纯javascript解决方案编辑了答案。看看我是如何使用document.ready和window.onload的。使用它们，代码将在页面加载时执行。对于jQuery，包括库并将我的代码扔到页面上的任何地方。对于纯Javavascript，只需将代码抛出页面上的任意位置（当然是在标记内）.Gotcha…在这种情况下。不起作用？哈哈，至少对我来说是这样。再次，我链接了jquery，链接了我用上述代码创建的js页面，并从html页面中删除了onmouseover/mouseout设置，将其剥离为div id和该div中的文本。不知道我做错了什么。herm.会继续检查这个。也许我不需要o更改CSS元素？谢谢为什么我们在jQuery解决方案中使用

getElementById（）

？因为它最接近初始代码，而且vanilla JS仍然比jQuery:）快，所以根本不要使用jQuery。好吧，好吧：）只是为了好玩（因为它们是许多其他工作解决方案），我已经更新了我的答案。就个人而言，我更喜欢在上使用带有选择器的

，而不是上面提到的其他解决方案，这就是为什么我让它出现的原因……尽管我有