2

大家好，我有一个非常简单的：

如何在过渡后使 CSS 属性（主要用于制作 DIV 形状）前后消失。我正在为班级做一个项目，但似乎无法弄清楚。

该页面应该如下所示：

http://ista230.com/images/assignments/7/page2.jpg

这是我对 CSS 的看法：

/* Navigation */

#nav{ 
    margin-bottom:2%; 
    margin-top:0%;
    width:100%; 
    background: #1d6287; 
} 

#nav ul { 
    padding: 100px 0 0; /* Remove default but add 40px to top */ 
    margin: 0; /* Remove default */ 
    list-style: none; 
    width: 100%; 
    overflow: hidden; /* So it 'contains' the floated <li> elements */ 
} 

#nav ul li {
    text-align:center;
    float: left; 
    min-height: 50px; 
    width: 20%; /* 6 items means 20% each */ 
    position: relative; 
}

#nav a { 
    text-decoration:none; 
    color:black; 
    display: block; 
    width: 100%; /* 100% of <li> */ 
    position: absolute; 
    bottom: 0; 
    left: 0; 
}
div.navItem { 
    padding: 4% 4%; 
    position: relative;
    background: #D54D25;
    border: 2px solid #D54D25;
}
/* For little dumb triangle */
div.navItem:after, div.navItem:before {
    bottom: 100%;
    border: solid transparent;
    content: " ";
    height: 1px;
    width: 1px;
    position: absolute;
    pointer-events: none;
}

div.navItem:after {
    border-color: rgba(136, 183, 213, 0);
    border-bottom-color: #D54D25;
    border-width: 10px;
    left: 50%;
    margin-left: -30px;
}
div.navItem:before {
    border-color: rgba(213, 77, 37, 0);
    border-bottom-color: #D54D25;
    border-width: 26px;
    left: 40%;
    margin-left: -26px;
}
div.navItem{
    -moz-transition: height .5s ease; /* Firefox 4 */ 
    -webkit-transition: height .5s ease; /* Safari and Chrome */ 
    -o-transition: height .5s ease; /* Opera */ 
    -ms-transition: height .5s ease; /* IE9 (maybe) */ 
    transition:height .5s ease; 
}

.navItem:hover 
{ 

    background: #999; /* Old browsers */ 
    color:white;
    border:none;
    background: #999; 
    background-image: url("../images/logo.png") no-repeat center; /* fallback */ 
    background: url("../images/logo.png") no-repeat center, -webkit-gradient(linear, left top, left bottom, from(#6cab26), to(#6ceb86)); /* Saf4+, Chrome */
    background: url("../images/logo.png")no-repeat center, -webkit-linear-gradient(top, #999, #FEFEFE); /* Chrome 10+, Saf5.1+ */ 
    background: url("../images/logo.png")no-repeat center, -moz-linear-gradient(top, #999, #FEFEFE); /* FF3.6+ */ 
    background: url("../images/logo.png")no-repeat center, -ms-linear-gradient(top, #999, #FEFEFE); /* IE10 */ 
    background: url("../images/logo.png")no-repeat center, -o-linear-gradient(top, #999, #FEFEFE); /* Opera 11.10+ */ 
    background: url("../images/logo.png")no-repeat center, linear-gradient(top, #999, #FEFEFE); /* W3C */
    height: 130px;
}

和 HTML：

 <nav id="nav">
       <ul>
            <li><a href="#"><div class="navItem">Home</div></a></li>
            <li><a href="#"><div class="navItem">Upcoming Flights</div></a></li>
            <li><a href="#"><div class="navItem">About Us</div></a></li>
            <li><a href="#"><div class="navItem">Travel Guide</div></a></li>
            <li><a href="#"><div class="navItem">Contact Us!</div></a></li>
        </ul>
   </nav>
4

2 回答 2

4

如果你想消失向上箭头，悬停菜单项后，你可以使用这个选择器：

div.navItem:hover:before{
    opacity:0;
}

此选择器适用于您的代码。我对您的代码进行了一些更改，您可以在这里看到：jsFiddle

于 2013-11-12T05:28:05.560 回答
0

您可以使用jQuery来收听过渡结束

jQuery(".navItem").one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) {
   your function here;
});

在此处查看演示 http://jsfiddle.net/Godinall/Aq2SB/

于 2013-11-12T05:44:49.313 回答