更改导航栏悬停事件

时间：2014-04-12 21:39:24

标签： javascript html css navbar

我在CSS中有这个新的导航栏悬停事件，但我无法找到一种方法，可以通过我当前的导航栏悬停事件将其切换出来。

我的当前导航条形码：

    <!DOCTYPE html>
<html lang="en">
<head>
<!-- CSS -->
<link href="http://themodulesource.com/bootstrap3_for_enjin/css/bootstrap.min.css" rel="stylesheet">


<style type="text/css">



/*Positioning of our logo*/
.navbar-brand img {
margin-right: 20px;
margin-left: 20px;

}


/*Non responsive hacks*/

.container .navbar-header,
.container .navbar-collapse {
  margin-right: 0;
  margin-left: 0;
}

/* Always float the navbar header */
.navbar-header {
  float: left;
}

.nav-container{
max-width: none !important;
width: 1025px;
}

.nav-container{
margin-left:1955px;
}

.navbar-static-top {
margin-left: -1953px !important;
width: 4000px !important;
position: fixed !important;
}

/*End Non-Responsive Hacks*/


/*START ENJIN BAR NAV POSITIONING*/

/*Our nested admin and profile menus*/




 #boot_admin a .caret, #boot_profile a .caret {
    border-top-color: rgb(153, 153, 153) !important;
    border-bottom-color: rgb(153, 153, 153) !important;
}


#boot_admin{
margin-top:0px;

}

#boot_admin a:nth-child(1){
display:none;
}

#boot_profile{
height:auto;
}



#boot_profile span:hover{
background-color: transparent;
color: rgb(51, 51, 51) !important;
text-decoration: none;
}



/*Changes the style of our entire dropdown box to mimick Boot strap style*/
.element_dropdown_menu.element_popup.enjinbar-menu{
margin-top:32px;
z-index:99999;
border-radius:0px !important;
border-color:white !important;
}

#boot_profile .element_username{
color: rgb(153,153,153) !important;
text-decoration:none !important;
}

#boot_profile .element_username:hover{
color:white !important;
}

/*Our inner elements of our entire enjin drop down*/
.element_popup .inner {
background-color: white !important;
text-decoration:none;
list-style:none;
border:none;
-webkit-background-clip:padding-box;
-moz-background-clip:padding;
background-clip:padding-box;
}

/*Text - Our inner elements of our entire enjin drop down*/
.element_popup .inner li a{
color:#333;
font-size:13px;
font-family:Arial;
padding:4px 10px !important;
}

/*Text - Hover - Our inner elements of our entire enjin drop down*/
.element_popup .inner .menu-link:hover{
text-decoration:none;
color:#ffffff;
background-color:#0081c2;
background-image:-moz-linear-gradient(top, #0088cc, #0077b3);
background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
background-image:-webkit-linear-gradient(top, #0088cc, #0077b3);
background-image:-o-linear-gradient(top, #0088cc, #0077b3);
background-image:linear-gradient(to bottom, #0088cc, #0077b3);
background-repeat:repeat-x;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
}

/*Enjin Divider lines to look...better*/
.element_popup .inner .menu-divider-line{
background-color: #E5E5E5 !important;
border-bottom: 1px solid white !important;
height:1px !important;
opacity:0.4;
}

/*Profile drop down item hover events*/
.element_popup .inner .item:hover{
background-color: rgb(0, 129, 194);
background-image: linear-gradient(to bottom, rgb(0, 136, 204), rgb(0, 119, 179));
}

/*Profile drop down text style*/
.element_popup .inner .item a{
text-decoration:none;
font-weight: normal;
margin-bottom:-2px; /*Reduces some spacing..since menu is huge*/
color: rgb(51, 51, 51);
font-family:arial;
}

/*Profile drop down text style - hover*/
.element_popup .inner .item a:hover{
color: rgb(255, 255, 255);
}

/*Font,text - Our site box at bottom of profile dropdown*/
.sitebox a {
font-size:15px !important;
color:#333;
margin-left:-10px;
margin-top:-16px;
background-color:transparent;
}

/*Font,text, make less default space - Our site box at bottom of profile dropdown*/
.enjinbar-menu-user .sitebox{
margin-bottom:15px;
}

/*That damn gear! - Our site box at bottom of profile dropdown*/
.enjinbar-menu-user .sitebox .gear {
background-position: 40px 0px; /*Removes Enjin's mysterious extra icons*/ }

/*Text for site urls - Our site box at bottom of profile dropdown*/
.sitebox .url{
color:#333;
}



/*Removes our likes etc.*/
#enjin-bar #enjin-bar-likes{
display:none !important;
}

/*Removes site info,site name and our admin gear*/
#enjin-bar .left a:nth-of-type(1),#enjin-bar .left a:nth-of-type(2),#enjin-bar .left a:nth-of-type(3){
display:none !important;
}

/*creates a default right position for our admin, fixed, position manually on your fixed nav*/
#enjin-bar .left{
margin-top:8px;
z-index:9999;
margin-left:530px;
position:fixed;
}

/*Our admin text*/
#enjin-bar .left a{
color: rgb(119, 119, 119);
font-size:13px;
text-decoration: none;
font-size:13px;
font-family:Arial;
text-shadow: 0px 1px 0px rgb(255, 255, 255);
}

/*Our admin text on hover*/
#enjin-bar .left a:hover{
color: rgb(51, 51, 51);
text-decoration:none;
}

/*Makes navbar links shade on hover*/
.navbar .nav>li:hover{background-color:#C2C2C2;
box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.125) inset; /*fancy inset shadow, feel free to remove*/
}

/*Colors the background of the dropdown*/
.dropdown-menu {
background-color: #ffffff;
}

/*END Enjin bar nav positioning*/




</style>

</head>

<body>



<div class="navbar navbar-default navbar-static-top" role="navigation">
      <div class="nav-container">
        <div class="navbar-header">
          <a class="navbar-brand" href="http://mineflow.us">Mineflow</a>
        </div>
          <ul class="nav navbar-nav">
            <li><a href="http://www.mineflow.us/home"><i class="icon-home"></i>Home</a></li>
            <li><a href="http://www.mineflow.us/forum""><i class="icon-pencil"></i>Forum</a></li>
            <li><a href="http://www.mineflow.us/shop""><i class="icon-book">
</i>Donate</a></li>
            <li><a href="http://www.mineflow.us/vote""><i class="icon-star">
</i>Vote</a></li>
            <li><a href="http://mineflow.us/status""><i class="icon-signal">
</i>Status</a></li>
            <li class="dropdown">
           <a href="http://www.mineflow.us/members" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="200" data-close-others="false"><i class="icon-globe"></i>Members<b class="caret"></b></a>
              <ul class="dropdown-menu">
                      <li><a href="http://www.mineflow.us/members"">All Members</a></li>
                      <li><a href="http://www.mineflow.us/staff"">Staff</a></li>

</li>
              </ul>
</ul><!--End pull left nav-->
<ul class="nav navbar-nav pull-right"><!--start pull right nav-->
<li id="boot_admin"></li>
<li id="boot_profile"></li>
<li id="boot_join"></li>
<li id="boot_login"></li>
<li id="boot_register"></li>
          </ul>

      </div>
    </div>






<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="http://themodulesource.com/bootstrap3_for_enjin/js/bootstrap.min.js"></script>
<script src="http://themodulesource.com/bootstrap3_for_enjin/hover_js/twitter-bootstrap-hover-dropdown.js"></script>
<script> 
$(document).ready(function () {
    $('#enjin-bar .left a[href$="/admin"]').appendTo($('#boot_admin'));
    $('#enjin-bar .right .user a').appendTo($('#boot_profile'));
    $('<b class="caret"></b>"]').appendTo($('#boot_admin a'));
    $('<b class="caret"></b>').appendTo($('#boot_profile a'));
    $('.navbar-static-top').prependTo($('#page'));
    $('#enjin-bar a[href$="/login"]').appendTo($('#boot_login'));
    $('#enjin-bar a[href$="/register"]').appendTo($('#boot_register'));
    $('#enjin-bar .right .join-site a').appendTo($('#boot_join'));



});
</script>



</body>
</html>

这是我希望悬停事件成为的CSS。

<style>
                  <!--@import url(http://fonts.googleapis.com/css?family=PT+Sans:400,700);#cssmenu {
background:#FFF;
width:auto;
line-height:1;
display:inline-block;
position:relative;
font-family:'PT Sans', sans-serif;
margin:0;
padding:0;
}

#cssmenu ul {
list-style:none;
display:block;
margin:0;
padding:0;
}

#cssmenu ul:after {
content:' ';
display:block;
font-size:0;
height:0;
clear:both;
visibility:hidden;
}

#cssmenu ul li {
display:block;
position:relative;
margin:0;
padding:0;
}

#cssmenu ul li a {
text-decoration:none;
display:block;
-webkit-transition:color .2s ease;
-moz-transition:color .2s ease;
-ms-transition:color .2s ease;
-o-transition:color .2s ease;
transition:color .2s ease;
margin:0;
}

#cssmenu ul li ul {
position:absolute;
left:-9999px;
top:auto;
}

#cssmenu ul li ul li {
max-height:0;
position:absolute;
-webkit-transition:max-height .4s ease-out;
-moz-transition:max-height .4s ease-out;
-ms-transition:max-height .4s ease-out;
-o-transition:max-height .4s ease-out;
transition:max-height .4s ease-out;
background:#2E2E2E;
}

#cssmenu ul li ul li.has-sub:after {
display:block;
position:absolute;
content:'';
height:10px;
width:10px;
border-radius:5px;
background:#000;
z-index:1;
top:13px;
right:15px;
}

#cssmenu ul li ul li.has-sub:before {
display:block;
position:absolute;
content:'';
height:0;
width:0;
border:3px solid transparent;
border-left-color:#fff;
z-index:2;
top:15px;
right:15px;
}

#cssmenu ul li ul li a {
font-size:14px;
font-weight:400;
text-transform:none;
color:#000;
letter-spacing:0;
display:block;
width:140px;
padding:11px 10px 11px 20px;
}

#cssmenu ul li ul li:hover > a,#cssmenu ul li ul li.active > a {
color:#4cb6ea;
}

#cssmenu ul li ul li:hover:after,#cssmenu ul li ul li.active:after {
background:#4cb6ea;
}

function status() {
    $('#update').html("<img src='http://i.imgur.com/5DGm7WZ.gif'>");
    setInterval(function(){var status=new XMLHttpRequest();status.open("GET","http://minecraft-api.com/v1/get/?server=69.175.70.162",true);
    status.onreadystatechange=function(){if(status.readyState==4){mineplex=JSON.parse(status.responseText);if(mineplex.status){
    $('#update').html(mineplex.players.online);}else{$('#update').html(mineplex.players.online);}}};status.send();},1000);
}

#cssmenu ul li ul li:hover > ul {
left:170px;
top:0;
}

#cssmenu > ul > li {
float:left;
}

#cssmenu > ul > li:after {
content:'';
display:block;
position:absolute;
width:100%;
height:0;
top:0;
z-index:0;
background:#2E2E2E;
-webkit-transition:height .2s;
-moz-transition:height .2s;
-ms-transition:height .2s;
-o-transition:height .2s;
transition:height .2s;
}

#cssmenu > ul > li.has-sub > a {
padding-right:40px;
}

#cssmenu > ul > li.has-sub > a:after {
display:block;
content:'';
background:#fff;
height:12px;
width:12px;
position:absolute;
border-radius:13px;
right:14px;
top:16px;
}

#cssmenu > ul > li.has-sub > a:before {
display:block;
content:'';
border:4px solid transparent;
border-top-color:#4cb6ea;
z-index:2;
height:0;
width:0;
position:absolute;
right:16px;
top:21px;
}

#cssmenu > ul > li > a {
color:#fff;
font-weight:700;
letter-spacing:1px;
text-transform:uppercase;
font-size:14px;
z-index:2;
position:relative;
padding:15px 20px;
}

#cssmenu > ul > li:hover:after,#cssmenu > ul > li.active:after {
height:100%;
}

#cssmenu > ul > li:hover > a,#cssmenu > ul > li.active > a {
color:#000;
}

#cssmenu > ul > li:hover > a:after,#cssmenu > ul > li.active > a:after {
background:#000;
}

#cssmenu > ul > li:hover > a:before,#cssmenu > ul > li.active > a:before {
border-top-color:#fff;
}

#cssmenu > ul > li:hover > ul {
left:0;
}

#cssmenu #menu-button {
display:none;
}

#cssmenu ul li ul li:hover > ul > li,#cssmenu > ul > li:hover > ul > li {
max-height:72px;
position:relative;
}

@media all and max-width 768px,only screen and -webkit-min-device-pixel-ratio 2 and max-width 1024px,only screen and min--moz-device-pixel-ratio 2 and max-width 1024px,only screen and -o-min-device-pixel-ratio 21 and max-width 1024px,only screen and min-device-pixel-ratio 2 and max-width 1024px,only screen and min-resolution 192dpi and max-width 1024px,only screen and min-resolution 2dppx and max-width 1024px{
#cssmenu > ul {
max-height:0;
overflow:hidden;
-webkit-transition:max-height .35s ease-out;
-moz-transition:max-height .35s ease-out;
-ms-transition:max-height .35s ease-out;
-o-transition:max-height .35s ease-out;
transition:max-height .35s ease-out;
}

#cssmenu > ul.open {
max-height:1000px;
border-top:1px solid rgba(110,110,110,0.25);
}

#cssmenu ul {
width:100%;
}

#cssmenu ul > li {
float:none;
}

#cssmenu ul li a {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
width:100%;
padding:12px 20px;
}

#cssmenu ul li ul,#cssmenu ul li ul li ul,#cssmenu ul li ul li:hover > ul {
left:0;
position:relative;
}

#cssmenu ul li ul li,#cssmenu ul li:hover > ul > li {
max-height:999px;
position:relative;
background:none;
}

#cssmenu ul li ul li a {
color:#fff;
width:auto;
padding:8px 20px 8px 35px;
}

#cssmenu ul li ul ul li a {
padding:8px 20px 8px 50px;
}

#cssmenu ul li ul li:hover > a {
color:#000;
}

#cssmenu #menu-button {
display:block;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
width:100%;
text-transform:uppercase;
font-weight:700;
font-size:14px;
letter-spacing:1px;
color:#fff;
cursor:pointer;
padding:15px 20px;
}

#cssmenu #menu-button:after {
display:block;
content:'';
position:absolute;
height:3px;
width:22px;
border-top:2px solid #fff;
border-bottom:2px solid #fff;
right:20px;
top:16px;
}

#cssmenu #menu-button:before {
display:block;
content:'';
position:absolute;
height:3px;
width:22px;
border-top:2px solid #fff;
right:20px;
top:26px;
}

#cssmenu ul > li:after,#cssmenu ul li.has-sub > a:after,#cssmenu ul li.has-sub > a:before,#cssmenu ul li ul li.has-sub:after,#cssmenu ul li ul li.has-sub:before {
display:none;
}
}
               </style>

有没有办法可以做到这一点？我已多次尝试但每次都失败了...... 有人可以帮忙吗？另外，如果您想知道为什么我要尝试这样做...这是因为当您将鼠标悬停在其上时CSS会添加一个很酷的效果，而不是仅仅突出显示任何效果/动画。

1 个答案:

答案 0 :(得分：0)

您要测试的代码 - HTML 

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="css.css"/>
  </head>
  <body>
    <div id="divOneTest" onmouseover="this.id='divTwoTest';" onmouseout="this.id='divOneTest';">
  </body>
</html>

CSS（制作一个名为css.css的新css文件）

#divOneTest{
border-style: outset;
border-width: 2px;
border-color: black;
}

#divTwoTest{
border-style: outset;
border-width: 2px;
border-color: white;
background-color: black;
}

这有帮助吗？

相关问题
最新问题