0
FIXEDdiv：hoverプロパティを編集するにはどうすればよいですか？
私は位置と表示に私のCSSコードの要素を微調整されており、私のコードを編集する方法を見つけ出すように見えることはできません。私はdivの編集方法を理解していません。私が欲しいのは、ボタンのボックスサイズが何であるかに関してのみdivのホバーを許可することです。しかし、ボタンが配置されている水平のスペースにカーソルを合わせると、ドロップダウンリストがボタンに直接ホバーされていなくてもドロップダウンリストが表示されます。初心者のCSS編集ここで。私を助けてください。
#container {
margin: 0px auto;
/*
\t \t width: 1815px;
\t \t height: 820px;
\t \t */
padding: 100px;
}
/*button style*/
.collegebtn {
width: 100px;
color: white;
display: block;
padding: 25px;
font-size: 30px;
border: none;
cursor: pointer;
background-color: transparent;
font-family: 'Play', sans-serif;
box-shadow: 0 2px 4px 0 rgba(0, 181, 91, 0.74), 0 3px 10px 0 rgba(0, 181, 91, 0.74);
}
/*button effects*/
.collegebtn:hover {
background-color: #A10F31;
opacity: 0.6;
}
/*position <div> for the content*/
.listdrop {
width: 100px;
position: relative;
display: block;
margin-right: 40px;
margin-bottom: 40px;
}
/*the hidden list*/
.listdrop-title {
display: none;
position: absolute;
background-color: #ffffcc;
max-width: inherit;
text-align: center;
z-index: 1;
}
/*the links in the dropdown*/
.listdrop-title a {
color: black;
padding: 10px 12px;
display: block;
text-decoration: none;
font-family: 'Century Gothic';
}
/*bgcolor effects of links in dropdown*/
.listdrop-title a:hover {
background-color: #f1f1f1;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
/*this will show in hovering the titles*/
.listdrop:hover .listdrop-title {
display: inline;
text-align: center;
}
/*bgcolor changes on the shown dropdown*/
.listdrop:hover .buttondrop {
background-color: #d1e0e0;
}<body>
<ul style="list-style: none;">
<div id="container">
<p>Welcome to our Collections</p>
<div class="listdrop">
<li>
<button class="collegebtn"><a>Category by Title</a>
</button>
</li>
<div class="listdrop-title">
<a href="ProdList/SoftSol.html">Software</a>
<a href="ProdList/HardSol.html">Hardware</a>
<a href="ProdList/Others.html">Others</a>
</div>
</div>
</ul>
</div>
</body>
私はちょうど表示がうんざりです。私はちょうどカーソルがボタンの上にだけではなく、まだ表示されるようにドロップダウンリストを表示したいスペースが 'divを含んでいるので、カーソルがボタンが配置されている水平スペースのどこにでもぶつかってもドロップダウンリストが表示されます。 – Distro
これでボタンを移動するとドロップダウンは消えてしまいますその結果、マウスでサブメニューに到達することは決してできません。あなたが何を意味しているのか理解したので、私はより良い例を挙げます。 – denns
メインメニューが表示されたときにサブメニューが表示されるようにしたいと思ったのです。私の問題はより多くのdiv空間です。そして、私はその問題でjsfiddleのサンプルスニペットを見ることができ、カーソルがメニュー 'リンク'（この場合は、ボタン）。同じ問題ではありません..リンクのためにありがとう.. – Distro