如何使mouseenter功能褪色效果並保持在那裏

我想要創建一個選項卡，並且當有人將鼠標懸停在該選項卡上時，某個新的ul項目下面應該顯示淡入和淡出效果。直到現在我已經使用mouseenter，並且新的diplay項目應該停留在那裏以選擇其他選項。如何使mouseenter功能褪色效果並保持在那裏

HTML

<ul class="sector-nav"> 
<li><a href="#" class="residential-main">Residential</a></li> 
<li><a href="#"class="commercial-main">Commerical</a></li> 
<li><a href="#">Private</a></li> 
</ul> 

<ul class="res-pro residential-pro"> 
<li><a href="#">rProject 1</a></li> 
<li><a href="#">rProject 2</a></li> 
<li><a href="#">rProject 3</a></li> 
</ul> 

<ul class="com-pro commercial-pro"> 
<li><a href="#">cProject 1</a></li> 
<li><a href="#">cProject 2</a></li> 
<li><a href="#">cProject 3</a></li> 
</ul>

$(document).ready(function() { $('.residential-main').mouseenter(function() { $('.residential-pro').show(); }); $('.residential-main').mouseleave(function() { $('.residential-pro').hide(); }); }); 

$(document).ready(function() { $('.commercial-main').mouseenter(function() { $('.commercial-pro').show(); }); $('.commercial-main').mouseleave(function() { $('.commercial-pro').hide(); }); });

見jsFiddle

來源

2013-10-22 user2904068

小提琴是偉大的，但你應該總是包含在回答你的代碼，以及在doc案件jsfiddle下降。 –

謝謝@RoryMcCrossan會記住。 – user2904068

你不需要的JavaScript爲這個，你可以使用CSS只能用做:hover p suedo選擇器。

首先，你需要讓他們的父母li的相關ul元素孩子：

<ul class="sector-nav"> 
    <li> 
     <a href="#" class="residential-main">Residential</a> 
     <ul class="res-pro residential-pro"> 
      <li><a href="#">rProject 1</a></li> 
      <li><a href="#">rProject 2</a></li> 
      <li><a href="#">rProject 3</a></li> 
     </ul> 
    </li> 
    <li> 
     <a href="#" class="commercial-main">Commerical</a> 
     <ul class="com-pro commercial-pro"> 
      <li><a href="#">cProject 1</a></li> 
      <li><a href="#">cProject 2</a></li> 
      <li><a href="#">cProject 3</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Private</a></li> 
</ul>

然後修改下列選擇隱藏/顯示懸停相關ul元素：

.sector-nav > li { 
    display: inline; 
    padding-right: 20px; 
    border-right-width: 1px; 
    border-right-style: solid; 
    border-right-color: #999; 
    padding-left: 20px; 
    position: relative; 
} 
.sector-nav li > ul { 
    display: none; 
    position: absolute; 
} 
.sector-nav > li:hover > ul { 
    display: block; 
}

Example fiddle

來源

2013-10-22 09:19:37

如果您想使用js，您的解決方案非常接近。只需要替換jquery show，分別用fadeIn和fadeOut隱藏，並最初隱藏CSS中的元素。但是，您還需要修改您的html，以便將孩子呈現在他們的父母下方。

HTML

<ul class="sector-nav"> 
    <li class="residential-main"><a href="#">Residential</a><ul class="res-pro residential-pro"> 
      <li><a href="#">rProject 1</a> 
      </li> 
      <li><a href="#">rProject 2</a> 
      </li> 
      <li><a href="#">rProject 3</a> 
      </li> 
     </ul> 
    </li> 
    <li class="commercial-main"><a href="#" >Commerical</a> 

     <ul class="com-pro commercial-pro"> 
      <li><a href="#">cProject 1</a> 
      </li> 
      <li><a href="#">cProject 2</a> 
      </li> 
      <li><a href="#">cProject 3</a> 
      </li> 
     </ul> 
    </li> 
    <li><a href="#">Private</a> 
    </li> 
</ul>

CSS

.sector-nav li { 
    display: inline; 
} 

.residential-pro , .commercial-pro{ 
    display:none; 
    position:absolute; 
    padding:0; 
} 

.residential-pro li, .commercial-pro li{ 
    display:block; 
}

$(document).ready(function() { 

    $('.residential-main,.residential-pro').mouseenter(function() { 
     $('.residential-pro').stop(false,true).offset({left:$('.residential-main').offset().left}).fadeIn(); 
    }); 
    $('.residential-main').mouseleave(function() { 
     $('.residential-pro').stop(false,true).fadeOut(); 
    }); 
}); 

$(document).ready(function() { 
    $('.commercial-main,.commercial-pro').mouseenter(function() { 
     $('.commercial-pro').stop(false,true).offset({left:$('.commercial-main').offset().left}).fadeIn(); 
    }); 
    $('.commercial-main').mouseleave(function() { 
     $('.commercial-pro').stop(false,true).fadeOut(); 
    }); 
});

http://jsfiddle.net/tEMQj/7/

來源

2013-10-22 09:23:08 melc

我該怎麼做。commercial-pro保持在那裏，所以我可以點擊cProject 1或cProject 2或cProject 3 – user2904068

@ user2904068稍微調整一下，讓我看看，我會更新答案。我也會修改一下佈局。 – melc

@ user2904068用粗略解決方案更新了答案，根據您的方法進行了少許修改。 – melc

更好的方法是使用CSS。這裏有fiddle一個帶淡入淡出動畫的例子。

.fadeIn { 
     border: 1px solid #48484A; 
     font-size: 18px; 
     opacity:0; 
     -webkit-transition : all 2s ease-out; 
     -moz-transition : all 2s ease-out; 
     -o-transition : all 2s ease-out; 
     transition : all 2s ease-out; 
    } 
    .thisText:hover .fadeIn { 
     opacity: 1; 
    }

但是由於您使用的是JQuery，您還可以使用他提供動畫的fadein函數。

這裏是jQuery的文檔的例子：

<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>fadeIn demo</title> 
<style> 
p { 
position: relative; 
width: 400px; 
height: 90px; 
} 
div { 
position: absolute; 
width: 400px; 
height: 65px; 
font-size: 36px; 
text-align: center; 
color: yellow; 
background: red; 
padding-top: 25px; 
top: 0; 
left: 0; 
display: none; 
} 
span { 
display: none; 
} 
</style> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
</head> 
<body> 
<p> 
Let it be known that the party of the first part 
and the party of the second part are henceforth 
and hereto directed to assess the allegations 
for factual correctness... (<a href="#">click!</a>) 
<div><span>CENSORED!</span></div> 
</p> 
<script> 
$("a").click(function() { 
$("div").fadeIn(3000, function() { 
$("span").fadeIn(100); 
}); 
return false; 
}); 
</script> 
</body> 
</html>

中查看示例（JQuery doc）

來源

2013-10-22 09:31:48 Pith

如何使mouseenter功能褪色效果並保持在那裏

回答

相關問題