2

我想创建一个选项卡，当有人将鼠标悬停在该选项卡上时，新的 ul 项目应显示淡入和淡出效果。到目前为止，我已经使用了 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>

JS

$(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

4

3 回答 3

3

您不需要 javascript，因为您可以仅使用 CSS 和:hoverpsuedo 选择器来完成。

首先，您需要使相关ul元素成为其父元素的子元素li：

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

示例小提琴

于 2013-10-22T09:19:37.240 回答
1

更好的方法是使用 CSS。这是fiddle a with fadeIn 动画示例。

.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，您也可以使用他提供动画的淡入淡出功能。

这是来自 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 文档）

于 2013-10-22T09:31:48.250 回答
0

如果你想使用js，你的解决方案非常接近。只需分别用fadeIn和fadeOut替换jquery show,hide，并最初从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;
}

JS

    $(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-22T09:23:08.040 回答