-2
この質問は何度もここで尋ねられましたが、提案された解決策のどれも私のWebページでは機能しませんでした。 私はJSやjQueryを勉強して追加する時間がないので、HTMLとCSS3のみを使用します。 私は左側にサイドバーがあり、たくさんのアイコンがあります。私がこれらのアイコンをホバーすると、右にポップアップが現れます。ポップアップの下に私の主なコンテンツがあります。さて、アイコンをホバーすると、コンテンツの不透明度を下げたいと思います。 コードは（一部の部品が欠けている）そのようなものです：divプロパティを変更して別のdivをホバリングする
/* INIT REGION: sidebar menu customization */
#menu {
\t position: fixed;
\t top: 132px;
\t height: 100%;
\t width: 64px;
\t background-color: rgb(25, 151, 156);
\t /*padding-left: 10px;*/
\t color: rgb(0, 0, 63);
\t display: block;
}
#menu a {
\t display: block;
\t text-decoration: none;
\t color: rgb(0, 0, 63);
\t background-color: rgb(25, 151, 156);
\t transition: background-color 0.5s ease, border-left 0.5s linear;
\t border-left: 0px groove rgb(255, 140, 64);
\t position: relative;
\t display: block;
\t z-index: -1;
}
#menu a:hover {
\t border-left: 6px groove rgb(255, 140, 64);
\t background-color: rgb(255, 140, 64);
\t z-index: 0;
}
#menu a .hinttext {
\t display: table;
\t /*visibility: hidden;*/
\t width: 120px;
\t height: 52px;
\t background-color: rgb(255, 140, 64);
\t color: white;
\t padding: 3px 7px;
\t position: absolute;
\t top: 0;
\t z-index: -1;
\t left: -200%;
\t border-top-right-radius: 2px;
\t border-bottom-right-radius: 2px;
\t opacity: 0;
\t transition: opacity 0.75s ease, left 1s ease;
}
#menu a:hover ~ .content {
\t z-index: -2;
\t color: rgba(0, 0, 63, 0.3);
}
#menu a:hover .hinttext {
\t visibility: visible;
\t background-color: rgb(255, 140, 64);
\t z-index: 0;
\t opacity: 1;
\t left: 100%;
}
/* END REGION */
/* INIT REGION: main content customization */
.content {
\t position: relative;
\t margin-left: 64px;
\t margin-top: 120px;
\t text-align: justify;
\t padding-top: 16px;
\t padding-left: 24px;
\t padding-right: 24px;
\t width: 80%;
\t overflow: auto;
\t z-index: -1;
\t color: rgba(0, 0, 63, 1);
}
/* END REGION */<div id="menu">
<a href="index.html" class="active hint">
<img src="../media/home-icon.svg">
<span class="hinttext"><p>Home page</p></span>
\t </a>
[other icons]
</div>
<div class="content">
<h2>Hello World</h2>
<p>Have a nice day</p>
</div>まあ、#menu a:hover ~ .content部分がまったく機能していません。 私はそこに何が欠けていますか？
'#menu A'が付いていない.content'、それは'＃menu' –