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

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

我们删除了 <a>包装您的 div 的标签秒。你以后不应该这样做，因为<a>元素是内联的，而 div s 是 block 。

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