Question

我有以下菜单结构（由Wordpress创建，因此无法更改ID /类），我想在#header-nav li ul.children li a处于活动状态时使用JS更改#header-nav li ul.children li ul.children li a:hover的背景

有人可以帮我解释语法吗？

<div id="header-nav">
    <li class="page_item page-item-10"><a>Marketing</a>
        <ul class='children'>
            <li class="page_item page-item-153"><a href="{link}">The Marketing Team</a></li>
            <li class="page_item page-item-148"><a href="{link}">Ideas</a></li>
            <li class="page_item page-item-136"><a href="{link}">Referrals</a></li>
            <li class="page_item page-item-156"><a href="{link}">Partnerships</a></li>
        </ul>
    </li>
</div>

到目前为止，我正在考虑如果我可以获得正在悬停的元素的父级的类（即，如果用户将鼠标悬停在'Ideas'上，则为'page_item page-item-10'），那么我可以设置使用.hover（）函数的背景。不知道如何获得那个父类？

/**
 * Highlighs parent elements in a menu when a child is being hovered over
 */
$(function(){

    $('#header-nav li ul.children li ul.children li a').hover(function(e){

        /** Get the parent of the element that is being hovered over */
        var parent = ???;

        /** Set the background of the parent element on 'mouseenter' */
        $('#header-nav li ul.children li.'+parent+' a').css('background-color', '#0066B5');

    }, function(){

        /** Reset the background of all matching elelments of 'mouseleave' */
        $('#header-nav li ul.children li a').css('background-color', '#000');

    })
});

Answer 1

我认为这就是你所需要的：

$(function(){    
    $('#header-nav li ul.children li ul.children li a').hover(function(e){      
        $(this).parent().css('background-color', '#0066B5');

    }, function(){
        /** Reset the background of all matching elelments of 'mouseleave' */
        $('#header-nav li ul.children li').css('background-color', '#000');

    })
});

Answer 2

您可以在该锚标记的“onmouseover”事件上调用js函数。

例如：

<div id="header-nav">
<li class="page_item page-item-10"><a>Marketing</a>
    <ul class='children'>
        <li class="page_item page-item-153"><a id="menu1" onmouseover="change(this)"     href="{link}">The Marketing Team</a></li>
        .
        .
        .
    </ul>
</li>

的Javascript

<script language="javascript" type="text/javascript">
    function change(obj) 
    {
      document.getElementById(obj).style.backgroundColor = '#fff';
    }

</script>

Answer 3

如果你在wordpress中不能改变很多，你可以手动接收孩子并改变他们中的每一个

var ul = document.getElementById("header-nav").childNodes[1].childNodes[3];
//we are at the ul list...
var nodeCount = 1;
for(var i =1; i <= ul.children.length;i++) {
  ul.childNodes[nodeCount].addEventListener("mouseover",doChanges,false);
  //you could also use ul.childNodes[nodeCount].onclick = handler...
  nodeCount +=2;
}

这应该在文档准备就绪时发生，如果你使用的是jQuery，你可以在$（function（）{}）中插入它;或$（document）.ready（function（）{}）;

现在对于我们之前称为“doChanges”的处理程序，它基本上只对循环中的元素执行“某事”，所以只需尝试这样的事情......

function doChanges(e) {
  this.style.backgroundColor = "red";//or anything else
  this.style.border = "solid 1px red";
}

那基本上就是“鼠标悬停”事件，这基本上意味着当你将鼠标放在相应的li上时（因为我们将事件处理程序附加到每个），事件处理程序（或者在情况发生时完成工作的人）对每个人都做了一些事情。

你也可以做一个“mouseout”听众。

我希望这会有所帮助。

悬停时的风格

3 个答案: