Наведение div только в случае, если другой div зависший

Я новичок в HTML и CSS. На данный момент я пытаюсь их изучить. То, что я хочу сделать, это скрывать div и показывать его только в том случае, если вы наведете на другой div. Я почти сделал это, но я не знаю, как точно заблокировать div, и пусть только вихревая часть div видна. (Пробовал с дисплеем: блок и видимость: скрытый, но ничего не работает). Если бы кто-то мог мне помочь, я был бы очень благодарен. Заранее спасибо.Наведение div только в случае, если другой div зависший

PS: Идея заключается в том, что вы наводите курсор на «Меню», чтобы автоматически навести div, названный «OnThisPage».

body{ 
 
    margin:0; 
 
    padding:0; 
 
    background-color:#232323; 
 
} 
 

 
#NavigationWrap{ 
 
\t position:relative; 
 
\t width:100vw; 
 
\t height:5vw; 
 
\t background-color:#FFFFFF; 
 
} 
 

 
#Logo{ 
 
\t position:relative; 
 
\t margin-left:1vw; 
 
\t top:50%; 
 
\t width:29vw; 
 
\t height:4vw; 
 
\t transform:translateY(-50%); 
 
\t float:left; 
 
} 
 
\t \t 
 
#NavigationMenu{ 
 
\t position:relative; 
 
\t top:50%; 
 
\t width:70vw; 
 
\t height:2vw; 
 
\t float:right; 
 
\t transform:translateY(-50%); 
 
} 
 

 
#NavigationMenu li{ 
 
\t position:relative; 
 
\t top:50%; 
 
\t list-style-type: none; 
 
\t float:right; 
 
\t transform:translateY(-50%); 
 
} 
 
\t 
 
#NavigationMenu li:after{ 
 
\t position:relative; 
 
\t margin-right:1vw; 
 
\t font-family: 'OpenSans_Bold'; 
 
\t font-size:2vw; 
 
\t content:"|"; 
 
} 
 
\t 
 
#NavigationMenu li:first-child:after{ 
 
\t content:" "; 
 
} 
 
\t 
 
#NavigationMenu li a{ 
 
\t position:relative; 
 
\t margin-right:1vw; 
 
\t font-family: 'OpenSans_Bold'; 
 
\t font-size:2vw; 
 
\t color: #cc6666; 
 
\t text-decoration: none; 
 
} 
 
\t 
 
#NavigationMenu li a.active{ 
 
\t color:#00cccc; 
 
} 
 
\t 
 
#NavigationMenu li a.active:hover + #OnThisPage:hover{ 
 
\t color:#000000; 
 
} 
 
    
 
#NavigationMenu li a:hover{ 
 
\t position:relative; 
 
\t color:#00cccc; 
 
\t -webkit-transition: all 750ms ease; 
 
\t -moz-transition: all 750ms ease; 
 
\t -ms-transition: all 750ms ease; 
 
\t -o-transition: all 750ms ease; 
 
\t transition: all 750ms ease; 
 
} 
 
    
 
#OnThisPage{ 
 
\t position:relative; 
 
} 
 
\t 
 
#OnThisPage:hover{ 
 
\t position:absolute; 
 
\t font-size:20vw; 
 
\t top:10vw; 
 
\t left:10vw; 
 
\t width:10vw; 
 
\t height:10vw; 
 
\t background:red; 
 
}

<div id="NavigationWrap"> 
 
\t \t <div id="Logo">Logo</div> 
 
\t \t <div id="NavigationMenu"> 
 
\t \t \t <li><a href="#contacts">Login</a></li> 
 
\t \t \t <li><a href="#contacts">Contact</a></li> 
 
\t \t \t <li><a href="#projects">Featured Projects</a></li> 
 
\t \t \t <li><a href="#aboue">About Me</a></li> 
 
\t \t \t <li><a class="active" href="#home">Home</a></li> 
 
\t \t </div> 
 
\t \t <div id="OnThisPage">Test</div>

источник

2016-01-18 George Stoqnov

Вы можете использовать jQuery? – Paradoxetion

Да. Тем не менее, я не очень хорошо разбираюсь в jQuery. Это первая причина, по которой я пытался использовать только HTML и CSS. –

Итак, я постарался быть как можно яснее – Paradoxetion

Здесь вы идете с JQuery, я добавил комментарии для вас, чтобы вы поняли, что вы делаете.

jQuery("document").ready(function() { // we wait for document to get ready state 
    jQuery("#NavigationMenu li a").hover(function() { // we get hover state event on Menu 
    jQuery("#OnThisPage").toggleClass("hover") // and we just toggle class "hover" for another div 
    }) 
})

Не забудьте загрузить JQuery, как это:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

И очень небольшое изменение в код CSS - это не так: парить, но .hover Теперь

#OnThisPage.hover{ 
    position:absolute; 
    font-size:20vw; 
    top:10vw; 
    left:10vw; 
    width:10vw; 
    height:10vw; 
    background:red; 
}

Идея состоит в том, что мы переключаем класс для элемента, когда другой элемент зависает, и применяем стили не для: hover, а для этого нового класса.

источник

2016-01-19 13:42:24 Paradoxetion

Наведение div только в случае, если другой div зависший

ответ

Смежные вопросы