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 に答える