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

I am trying to write a code that make it so that an element will come to the front using a higher z-index when clicked, which I seem to have figured out, and I am trying to make that element maintain a different color identifying it as the current page. I would like to allow a mouseover function though to change the color of the other elements to identify them as other buttons, and these elements look like file tabs so it looks mush better this way. Unfortunately, I added a javascript code so that the elements will go back to the original gradient color when another is clicked, but I can't seem to figure out how to get a mouseover function to work for each individual element. I don't know if this makes any sense to you.

我正在尝试编写一个代码,使得一个元素在点击时使用更高的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>

I included a CSS like this which each element, but the javascript prevents it from working:

我包含了一个这样的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>

1 个解决方案

#1

Here you go man. Took me awhile to figure out what it was you wanted. Your HTML and CSS needs some work as it's definitely not up to best practices.

你去男人吧。花了一些时间来弄清楚你想要的是什么。您的HTML和CSS需要一些工作,因为它绝对不符合最佳实践。

Here's a fiddle with it working

We dropped the <a> tags from wrapping your divs. You shouldn't do that in the future, as <a> elements are inline while divs are blocks.

我们从包装你的div中删除了标签。你不应该在将来这样做,因为元素是内联的,而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>  

 

We also got rid of a lot of your JavaScript, as most of that can be done better with CSS, so we excised this whole section:

我们还摆脱了很多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'); }); 
});

That whole thing is gone, because mostly it doesn't make sense.

整个事情都消失了,因为大多数情况都没有意义。

 

And here's the CSS that's going to take over most of the hard work:

这是将要接管大部分艰苦工作的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;
}