Question

好吧，我会尽量让它变得清晰。善待，我是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做到这一点？想法/意见？谢谢！

Answer 1

这是针对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';
        };
    }
}

Answer 2

$(".myClass").mouseover(function() {
    $('#ub' + this.id).css('background-color', 'gray');
  }).mouseout(function(){
     $('#ub' + this.id).css('background-color', 'white');
  });

Answer 3

以下是答案with a working DEMO：

http://jsfiddle.net/AVk6k/1/

使用jQuery .hover()代替。 .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');
    });
});

您还有一些</a>个标记丢失。

<强> HTML：

<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-->

Answer 4

所有提供的解决方案都使用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-->

Answer 5

$("#nav").on("mouseover", "div", function() {
    $('#ub' + this.id).css('backgroundColor', 'gray');
}).on("mouseout", "div", function() {
    $('#ub' + this.id).css('backgroundColor', 'white');
});

Answer 6

编辑：误读了这个问题。这是我修改过的答案。

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

<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>

这确实需要一些额外的样式来删除默认列表样式，但会产生对Google网络抓取工具更有意义的导航，并遵循良好的编码惯例。如果有疑问，这是css的开始：

#nav {margin:0; padding:0;}
#nav li {list-style:none; float:left; padding:5px 10px; background:#FFF;}
#nav a {color:#000; text-decoration:none;}

要回答原始问题，您可以使用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的更多帮助，请转到http://api.jquery.com/，在那里他们有一些优秀的深度文档。

NB - 如果没有看到您正在应用的实际样式，我无法确定，但听起来您的下划线也可以通过添加底部边框然后在悬停时更改颜色来实现使用“：hover”css伪类。

为单独的div创建onmouseover函数

6 个答案: