悬停时的样式

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

任何人都可以帮助我的语法？

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

到目前为止，我在想，如果我能得到的类正在上空盘旋元素的父（即“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'); 

    }) 
});

来源

2012-02-01 David Gard

我觉得这是你所需要的：

$(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'); 

    }) 
});

来源

2012-02-01 10:45:36 jerjer

非常接近 - 已将$（this）.parent（）'更改为'$（this）。父母（'li'）'，并在'mouseleave'函数中镜像代码（但是使用＃000背景颜色），这似乎工作。谢谢您的帮助。 – 2012-02-01 10:55:00

我会将'.css（'background-color'，'＃000'）'改为'.css（'background-color'，''）'，但是看起来不错。 – 2012-02-03 05:05:47

您可以拨打锚标记的“的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>

来源

2012-02-01 10:09:09 Exor

感谢您的答复异或，但也有几个问题。首先，菜单的输出是由Wordpress完成的，所以我根本无法改变它（尽管如果需要的话，我可以在JS中的事件上添加鼠标）。另外，对于我没有经验的眼睛，JS提供的看起来会改变被悬停的元素的背景，而不是父级？在给出的例子中，如果使用悬停在'想法'上，那么我需要'营销'的背景来改变。谢谢。 – 2012-02-01 10:19:07

可以添加id到li标签吗？ – Exor 2012-02-01 10:27:56

不幸的是没有。我想知道如何获取父类，然后使用hover（）设置背景，但我不知道如何获取。将更新原始问题与攻角和代码示例到目前为止...... – 2012-02-01 10:29:37

如果你不能在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"; 
}

所以基本上多数民众赞成“mouseover”事件基本上意味着当你把鼠标放在相应的li上时（因为我们每个都附加了一个事件处理程序），事件处理程序（或者在情况发生时做这项工作的人）对每个li 。

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

我希望这会有所帮助。

来源

2012-02-01 10:29:00 Yohann

悬停时的样式

回答

相关问题