Изменение цвета элемента на клике и на мышке

Question

Я пытаюсь написать код, который сделает его таким, чтобы элемент попал на передний план, используя более высокий индекс z, когда я щелкнул, и я, кажется, понял, и я пытаясь заставить этот элемент поддерживать другой цвет, идентифицируя его как текущую страницу. Я хотел бы разрешить функцию mouseover, но изменить цвет других элементов, чтобы идентифицировать их как другие кнопки, и эти элементы выглядят как вкладки с файлами, поэтому они выглядят намного лучше. К сожалению, я добавил код javascript, чтобы элементы возвращались к исходному цвету градиента при нажатии на другой, но я не могу понять, как заставить функцию mouseover работать для каждого отдельного элемента. Я не знаю, имеет ли это смысл для вас.

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 - это блоки.

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