Ответы пользователя по тегу JavaScript
  • Как остановить выполнение функции "hover" в JQuery на другие классы?

    @Mad-cote Автор вопроса
    <li><a href="#">Главная</a></li>
    
                <li><a class="drops_link" href="#">Создание сайтов<span class="drop"></span></a>
                  <ul >
                    <li><a href="#">Сайт-визитка</a></li>
                    <li><a href="#">Сайт для бизнеса</a></li>
                    <li><a href="#">Лендинг</a></li>
                    <li><a href="#">Информационный портал</a></li>
                    <li><a href="#">Интернет-магазин</a></li>
                  </ul>
                </li>
    
                <li><a class="drops_link" href="#">SEO<span class="drop"></span></a>
                  <ul>
                    <li><a href="#">Поисковое продвижение</a></li>
                    <li><a href="#">Контекстная реклама</a></li>
                  </ul>
                </li>


    Теперь CSS:

    .head_menu {position:absolute; right:0; top:45px;}
    .head_menu ul {}
    .head_menu ul li {
    	float:left;
    	margin:0 5px;
    	position:relative;
    }
    .head_menu ul li a {
    	font-family: 'SegoePrintRegular';
    	color:#000;
    	text-decoration:none;
    	font-size:1.125em;
    	padding:5px 10px;
    }
    .head_menu ul li a:hover {
    	background:rgba(0,0,0,0.1);
    	-webkit-border-radius:5px;
    	-moz-border-radius:5px;
    	border-radius:5px;
    }
    .head_menu .active {
    	background:rgba(0,0,0,0.1);
    	-webkit-border-radius:5px;
    	-moz-border-radius:5px;
    	border-radius:5px;
    }
    /* CSS треугольник */
    .head_menu .drop {
    	background-image:url(img/head_drei.png);
    	background-position:center;
    	background-repeat:no-repeat;
    	width:10px; height:10px;
    	position:absolute;
    	bottom:-20px;
    	left:47%;
    }
    .head_menu ul li a:hover .drop {background-image:url(img/head_drei_hover.png);}
    
    .head_menu .activeDrop {background-image:url(img/head_drei_hover.png) !important;}
    /* -------------------- */
    
    /* -------------------- */
    /* DROP MENU */
    /* -------------------- */
    /* Прячем меню */
    .head_menu li ul {
    	z-index:999;
    	visibility:hidden;
    	opacity:0;
    	position:absolute;
    	top:25px;
    	left:10px;
    	-webkit-transition:all 0.3s ease-in 0s;
    	-moz-transition:all 0.3s ease-in 0s;
    	transition:all 0.3s ease-in 0s;
    }
    /* Показываем меню */
    .head_menu li:hover ul, .head_menu li ul:hover {visibility:visible; opacity:1;}
    .head_menu .drops ul:hover  {color:#fff;}
    /* Выпадающее меню дизайн */
    .head_menu li ul li {margin:6px 0;}
    .head_menu li ul li:before {
    	content:url("img/droplink.png");
    	position:absolute;
    	bottom:3px;
    }
    .head_menu li ul li a {
    	font-size:16px;
    	white-space:nowrap;
    	padding:0;
    	margin:5px 10px;
    }
    .head_menu li ul li a:hover {
    	background:none;
    	border-bottom:1px dashed #000;
    	border-radius:0;
    }
    Ответ написан