$('.ca-menu li').click(function() { $('.ca-menu li').removeClass("active"); $(this).addClass("active"); });
.active { background-color: red!important; } @font-face { font-family: 'WebSymbolsRegular'; src: url('websymbols/websymbols-regular-webfont.eot'); src: url('websymbols/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'), url('websymbols/websymbols-regular-webfont.woff') format('woff'), url('websymbols/websymbols-regular-webfont.ttf') format('truetype'), url('websymbols/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg'); font-weight: normal; font-style: normal; } .ca-menu { padding: 0 0 0 48px; margin: 20px auto; width: 1020px; } .ca-menu li { width: 189px; height: 189px; border: 10px solid #f6f6f6; overflow: hidden; position: relative; float: left; background: #fff; margin-left: -48px; -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); -webkit-border-radius: 125px; -moz-border-radius: 125px; border-radius: 125px; -webkit-transition: all 400ms linear; -moz-transition: all 400ms linear; -o-transition: all 400ms linear; -ms-transition: all 400ms linear; transition: all 400ms linear; } .ca-menu li:last-child { margin-right: 0px; } .ca-menu li a { text-align: left; width: 100%; height: 100%; display: block; color: #333; position: relative; } .ca-icon { font-family: 'WebSymbolsRegular', cursive; font-size: 40px; color: #f6f6f6; ; line-height: 60px; position: absolute; width: 100%; height: 60px; left: 0px; top: 30px; text-align: center; -webkit-transition: all 400ms linear; -moz-transition: all 400ms linear; -o-transition: all 400ms linear; -ms-transition: all 400ms linear; transition: all 400ms linear; } .ca-main { font-size: 24px; position: absolute; top: 110px; height: 80px; width: 170px; left: 50%; margin-left: -85px; opacity: 0.8; text-align: center; color: #555; } .ca-sub { display: none; } .ca-menu li:hover .ca-menu li. { border-color: #333; z-index: 999; -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .ca-menu li:hover .ca-icon { color: #000; font-size: 60px; text-shadow: 0px 0px 1px #000; -webkit-animation: moveFromBottom 300ms ease; -moz-animation: moveFromBottom 300ms ease; -ms-animation: moveFromBottom 300ms ease; } .ca-menu li:hover .ca-main { color: #000; -webkit-animation: moveFromBottom 500ms ease; -moz-animation: moveFromBottom 500ms ease; -ms-animation: moveFromBottom 500ms ease; } @-webkit-keyframes moveFromBottom { from { -webkit-transform: translateY(200%) scale(0.5); opacity: 0; } to { -webkit-transform: translateY(0%) scale(1); opacity: 1; } } @-moz-keyframes moveFromBottom { from { -moz-transform: translateY(200%) scale(0.5); opacity: 0; } to { -moz-transform: translateY(0%) scale(1); opacity: 1; } } @-ms-keyframes moveFromBottom { from { -ms-transform: translateY(200%) scale(0.5); opacity: 0; } to { -ms-transform: translateY(0%) scale(1); opacity: 1; } }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="ca-menu" style="float:left;"> <li class="active"> <a href="#"> <span class="ca-icon">F</span> <div class="ca-content"> <h2 class="ca-main">Exceptional Service</h2> <h3 class="ca-sub">Personalized to your needs</h3> </div> </a> </li> <li> <a href="#"> <span class="ca-icon">H</span> <div class="ca-content"> <h2 class="ca-main">Creative Storytelling</h2> <h3 class="ca-sub">Advanced use of technology</h3> </div> </a> </li> <li> <a href="#"> <span class="ca-icon" id="heart">N</span> <div class="ca-content"> <h2 class="ca-main">Infographical Education</h2> <h3 class="ca-sub">Understanding visually</h3> </div> </a> </li> <li> <a href="#"> <span class="ca-icon">K</span> <div class="ca-content"> <h2 class="ca-main">Sophisticated Team</h2> <h3 class="ca-sub">Professionals in action</h3> </div> </a> </li> <li> <a href="#"> <span class="ca-icon">L</span> <div class="ca-content"> <h2 class="ca-main">Unconditional Support</h2> <h3 class="ca-sub">24/7 for you needs</h3> </div> </a> </li> </ul>
你可以这样做一个先生:
请加上所有 li 喜欢这个方法代码:
li
<li onmouseover="this.style.backgroundColor='#006db9'" onmouseout="this.style.backgroundColor='red'">
并添加此代码您的文件
<ul class="ca-menu"> <li onmouseover="this.style.backgroundColor='#006db9'" onmouseout="this.style.backgroundColor='red'"> <a href="indexenactive.php?menu=home"> <span class="ca-icon">F</span> <div class="ca-content"> <h2 class="ca-main">Home</h2> <h3 class="ca-sub"></h3> </div> </a> </li> <li onmouseover="this.style.backgroundColor='#00FF00'" onmouseout="this.style.backgroundColor='Gray'"> <a href="indexenactive.php?menu=research"> <span class="ca-icon">L</span> <div class="ca-content"> <h2 class="ca-main">Research</h2> <h3 class="ca-sub"></h3> </div> </a> </li> <li onmouseover="this.style.backgroundColor='#FFFF00'" onmouseout="this.style.backgroundColor='orange'"> <a href="indexenactive.php?menu=teaching"> <span class="ca-icon" id="heart">U</span> <div class="ca-content"> <h2 class="ca-main">Teaching </h2> <h3 class="ca-sub"></h3> </div> </a> </li> <li onmouseover="this.style.backgroundColor='#FF00FF'" onmouseout="this.style.backgroundColor='#00FF00'"> <a href="indexenactive.php?menu=publication"> <span class="ca-icon">a</span> <div class="ca-content"> <h2 class="ca-main">Publications</h2> <h3 class="ca-sub"></h3> </div> </a> </li> <li onmouseover="this.style.backgroundColor='#C0C0C0'" onmouseout="this.style.backgroundColor='#00FFFF'"> <a href="indexenactive.php?menu=projects"> <span class="ca-icon">`</span> <div class="ca-content"> <h2 class="ca-main">Projects</h2> <h3 class="ca-sub"></h3> </div> </a> </li> <li onmouseover="this.style.backgroundColor='#006db9'" onmouseout="this.style.backgroundColor='red'"> <a href="indexenactive.php?menu=contact"> <span class="ca-icon">@</span> <div class="ca-content"> <h2 class="ca-main">Contact</h2> <h3 class="ca-sub"></h3> </div> </a> </li> </ul>
DEMO FIDDLE