[英]Change Color of Element on Click and Mouseover
我正在嘗試編寫使之成為可能的代碼,以便使元素在單擊時使用較高的z索引顯示在最前面,這似乎已經弄清楚了,並且我正在嘗試使該元素保持不同的顏色來標識它作為當前頁面。 我想允許使用mouseover函數來更改其他元素的顏色,以將它們標識為其他按鈕,而且這些元素看起來像文件選項卡,因此用這種方法看起來更好。 不幸的是,我添加了一個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>
來吧,男人。 花了我一段時間才弄清楚你想要什么。 您的HTML和CSS需要一些工作,因為這絕對不是最佳實踐。
我們從包裝您的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,因為大多數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;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.