divホバリングで表示されない

-1

divタグにいくつかのコンテンツを表示しようとしています。ここではAboutについてホバリングするときにdivを表示しようとしています。しかし、それはうまくいきません。残りを無視してください！divホバリングで表示されない

.container { 
width: 1000px; 
height: 1000px; 
margin: 0 auto; 
border: 1px solid gray; 
} 
header { 
overflow: hidden; 
} 
.logo { 
float: left; 
} 
.navigation ul { 
list-style: none; 
} 
.navigation ul li { 
background-color: #e0e0d1; 
margin-top: 40px; 
width: 96px; 
border: 1px solid lightblue; 
height: 40px; 
text-align: center; 
float: left; 
} 
.navigation ul li a { 
font-size: 11px; 
text-decoration: none; 
color: black; 
} 
li a:hover:not(.active) { 
color: #2485ba; 
} 
.active { 
color: #2485ba; 
} 
/*the css for hiding and displaying*/ 
.dispmenu:hover .submenu { 
visibility: visible; 
} 
.submenu { 
background-color: darkblue; 
color: white; 
width: 684; 
height: 100px; 
margin-left: 312px; 
visibility: hidden; 
}

出典

2017-05-14 Joy D' souza

CSSは、ページ全体を検索して検索することができないため、リスト項目自体にサブメニューを含める必要があります。 [このチュートリアル]（https://www.w3schools.com/howto/howto_css_dropdown.asp）をご覧ください。 –

関連していないので、必ずheadタグとulタグを閉じてください。 –

あなたはそのルートを行けばここでjQueryのオプションが..あなたを約.hoverhere

$('.dispmenu').hover(function() { 
 
    $('.submenu').addClass('dispmenu-hover'); 
 
}, function() { 
 
    $('.submenu').removeClass('dispmenu-hover'); 
 
})

body { 
 
    margin: 0; 
 
} 
 
.container { 
 
    /*width: 1000px;*/ 
 
    /*height: 1000px;*/ 
 
    margin: 0 auto; 
 
    border: 1px solid gray; 
 
} 
 
header { 
 
    overflow: hidden; 
 
} 
 
.logo { 
 
    float: left; 
 
} 
 
.navigation ul { 
 
    list-style: none; 
 
display: flex; 
 
} 
 
.navigation ul li { 
 
display: flex; 
 
    background-color: #e0e0d1; 
 
    margin-top: 40px; 
 
    /*width: 96px;*/ 
 
flex: 1; 
 
    border: 1px solid lightblue; 
 
    height: 40px; 
 
    text-align: center; 
 
    float: left; 
 
} 
 
.navigation ul li a { 
 
display: flex; 
 
justify-content: center; 
 
align-items: center; 
 
flex: 1; 
 
text-align: center; 
 
    font-size: 11px; 
 
    text-decoration: none; 
 
    color: black; 
 
} 
 
li a:hover:not(.active) { 
 
    color: #2485ba; 
 
} 
 
.active { 
 
    color: #2485ba; 
 
} 
 
.submenu { 
 
    background-color: darkblue; 
 
    color: white; 
 
    width: 684; 
 
    height: 100px; 
 
    margin-left: 312px; 
 
    visibility: hidden; 
 
} 
 
/*the css for hiding and displaying*/ 
 
/* this class moved to appear after .submenu class */ 
 
.dispmenu-hover { 
 
    visibility: visible; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <header class="head-nav"> 
 
    <a href="index.html"><img class="logo" src="Images/Logo.jpg"></a> 
 
    <nav class="navigation"> 
 
     <ul> 
 
     <li><a href="#">Home</a></li> 
 
     <!––The hovering Menu––> 
 
     <li class="dispmenu"><a href="#">About</a></li> 
 
     <li><a href="#">Center</a></li> 
 
     <li><a href="#">Team </a></li> 
 
     <li><a href="#">Team</a></li> 
 
     <li><a href="#">Testing</a></li> 
 
     <li><a href="#">Services</a></li> 
 
     </ul> 
 
    </nav> 
 
    </header> 
 
    <div class="submenu"> 
 
    Hello 
 
    </div> 
 
</div>

を読むことができます

フィドル

https://jsfiddle.net/Hastig/ns6j55zg/

です10

出典

2017-05-14 10:13:22

.dispmenu:hover .submenu {

あなたがそれらのセレクターの間にスペースを持っている：

<html> 
<head> 
<link rel="stylesheet" href="Style/styling.css"> 
<head> 
<body> 
<div class="container"> 
<header class="head-nav"> 
<a href="index.html"><img class="logo" src="Images/Logo.jpg"></a> 
<nav class="navigation"> 
<ul> 
<li><a href="#">Home</a></li> 

<!––The hovering Menu––> 
<li class="dispmenu"><a href="#">About</a></li> 

<li ><a href="#">Center</a></li> 
<li ><a href="#">Team </a></li> 
<li><a href="#">Team</a></li> 
<li><a href="#">Testing</a></li> 
<li><a href="#">Services</a></li> 
<ul> 
</nav> 
</header> 
<div class="submenu"> 
Hello 
</div> 
</div> 
</body> 
</html>

とCSS：

は、ここに私のhtmlです。スペースはdescendant combinatorです。

要素<div class="submenu">は要素<li class="dispmenu">の子孫ではありません。それはリスト項目の曾祖父の兄弟です。 JavaScriptのを使用してDOM

の構造を変更する

：あなたはどちらかなしにこれを達成することはできませんので

CSSセレクタは、アップDOMツリーを行く説明する方法を提供しません
- サブメニューがそのメニュー項目から完全に切り離されていることはあまり意味がありません。 that type of data is normally representedについて考えてみてください。
- メニューが消える前に時間の遅れなどを入れることはできません。作成しようとしているもののようなメニューは、アクセシビリティのニーズのある人には難しいものです（例：マウスを動かすのに苦労する関節炎患者直線を描き、その辺をメニューの境界線の内側に置く）。

出典

2017-05-14 09:50:29 Quentin

divホバリングで表示されない

答えて

関連する問題