单击和鼠标悬停时更改元素的颜色

Question

我正在尝试编写一个代码，以便元素在单击时使用更高的z-index来到前端，这似乎是我已经弄清楚的，而我试图使该元素保持与当前页面不同的颜色。我想允许一个鼠标悬停功能来改变其他元素的颜色以将它们识别为其他按钮，并且这些元素看起来像文件标签，所以它看起来更好用这种方式。不幸的是，我添加了一个javascript代码，以便单击另一个元素时会返回到原始渐变颜色，但我似乎无法弄清楚如何让每个单独元素都能使用鼠标悬停功能。我不知道这对你是否有意义。

的Javascript：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> 
<script type="text/javascript"> 
    $(function() { 
    // Change this selector to find whatever your 'boxes' are 
    var boxes = $("div.menuitem"); 

    // Set up click handlers for each box 
    boxes.click(function() { 
     var el = $(this), // The box that was clicked 
      max = 0; 

     // Find the highest z-index 
     boxes.each(function() { 
      // Find the current z-index value 
      var z = parseInt($(this).css("z-index"), 10); 
      // Keep either the current max, or the current z-index, whichever is higher 
      max = Math.max(max, z); 
     }); 

     // Set the box that was clicked to the highest z-index plus one 
     el.css("z-index", max + 1); 
    }); 
}); 
    $(document).ready(function() 
     { 


    $("#productmenu").mouseover(function() { $("#productdropdown").css('visibility','visible'); }); 
    $("#productdropdown").mouseover(function() { $("#productdropdown").css('visibility','visible'); }); 
    $("#productdropdown").mouseout(function() { $("#productdropdown").css('visibility','hidden'); }); 
    $("#productmenu").mouseout(function() { $("#productdropdown").css('visibility','hidden'); }); 

     }); 
    $(document).ready(function() 
     { 


    $("#productmenu").click(function() { $("#couponmenu").css('background','linear-gradient(0deg, #F90, #D76B00)'); }); 
    $("#productmenu").click(function() { $("#contestmenu").css('background','linear-gradient(0deg, #F90, #D76B00)'); }); 
    $("#productmenu").click(function() { $("#contactmenu").css('background','linear-gradient(0deg, #F90, #D76B00)'); }); 
    $("#couponmenu").click(function() { $("#productmenu").css('background','linear-gradient(0deg, #F90, #D76B00)'); }); 
    $("#couponmenu").click(function() { $("#contestmenu").css('background','linear-gradient(0deg, #F90, #D76B00)'); }); 
    $("#couponmenu").click(function() { $("#contactmenu").css('background','linear-gradient(0deg, #F90, #D76B00)'); }); 
    $("#contestmenu").click(function() { $("#couponmenu").css('background','linear-gradient(0deg, #F90, #D76B00)'); }); 
    $("#contestmenu").click(function() { $("#productmenu").css('background','linear-gradient(0deg, #F90, #D76B00)'); }); 
    $("#contestmenu").click(function() { $("#contactmenu").css('background','linear-gradient(0deg, #F90, #D76B00)'); }); 
    $("#contactmenu").click(function() { $("#productmenu").css('background','linear-gradient(0deg, #F90, #D76B00)'); }); 
    $("#contactmenu").click(function() { $("#contestmenu").css('background','linear-gradient(0deg, #F90, #D76B00)'); }); 
    $("#contactmenu").click(function() { $("#couponmenu").css('background','linear-gradient(0deg, #F90, #D76B00)'); }); 

     }) 
     </script> 

我包括像这样的CSS其中每个元素，但是javascript的阻止它的工作：

#productmenu:hover { 
    background:linear-gradient(0deg, #FF972F, #FFD3A8); 
    z-index:500; 
} 

HTML：

<a href="#"> 
<div id="productmenu" class="menuitem" onclick="this.style.background='linear-gradient(0deg, #FF972F, #FFD3A8)',style.zIndex='500';">Products</div> 
<ul id="productdropdown"> 
<li><a href="#">Product 1</a></li> 
<li><a href="#">Product 2</a></li> 
<li><a href="#">Product 3</a></li> 
</ul> 
</a> 
<a href="#"> 
<div id="contestmenu" class="menuitem" onclick="this.style.background='linear-gradient(0deg, #FF972F, #FFD3A8)',style.zIndex='500';">Contest</div> 
</a> 
<a href="#"> 
<div id="couponmenu" class="menuitem" onclick="this.style.background='linear-gradient(0deg, #FF972F, #FFD3A8)',style.zIndex='500';">Coupon</div> 
</a> 
<a href="#"> 
<div id="contactmenu" class="menuitem" onclick="this.style.background='linear-gradient(0deg, #FF972F, #FFD3A8)',style.zIndex='500';">Contact</div> 
</a> 

Answer 1

在这里你去人。花了我一段时间来弄清楚你想要什么。你的HTML和CSS需要一些工作，因为它绝对不符合最佳实践。

Here's a fiddle with it working

我们从您的包裹小号div下降了<a>标签。你不应该这样做，因为<a>元素是内联的，而div是块。

HTML

<div id="productmenu" class="menuitem"><a>Products</a> 
    <ul id="productdropdown"> 
     <li><a href="#">Product 1</a></li> 
     <li><a href="#">Product 2</a></li> 
     <li><a href="#">Product 3</a></li> 
    </ul> 
</div> 

 

我们也摆脱了很多你的JavaScript的，因为大多数的可以做与CSS更好，所以我们切除这一整段：

JavaScript

$(document).ready(function() { 
    $("#productmenu").mouseover(function() { $("#productdropdown").css('visibility','visible'); }); 
    $("#productdropdown").mouseover(function() { $("#productdropdown").css('visibility','visible'); }); 
    $("#productdropdown").mouseout(function() { $("#productdropdown").css('visibility','hidden'); }); 
    $("#productmenu").mouseout(function() { $("#productdropdown").css('visibility','hidden'); }); 
}); 

整件事情都没有了，因为大多数情况没有意义。

 

而这里的，那将接管大部分的辛勤工作的CSS：

CSS

[id$=menu]:hover > a, 
[id$=menu] li:hover > a { 
    background:linear-gradient(0deg, #FF972F, #FFD3A8); 
} 
[id$=menu]:hover ul { 
    display: block; 
    list-style: none; 
    margin: 0; 
    padding: 0 0 0 20px; 
} 
[id$=menu] ul { 
    display: none; 
} 
[id$=menu] a { 
    display: block; 
}