-2
我知道這個問題已經被問了很多次，在這裏，但沒有提出的解決方案在我的網頁中工作。 我只使用HTML和CSS3，因爲我沒有時間學習JS或jQuery並添加它。 我有一個側邊欄在左邊，有一堆圖標。當我懸停這些圖標時，彈出窗口顯示在右側。在彈出窗口下，我有我的主要內容。現在，當我懸停圖標時，我想降低內容的不透明度。 代碼是這樣的（部分缺失）：更改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部分不工作。 我在那裏錯過了什麼？
因爲'.content'不受'#menu了'之前，它的旁邊'＃menu' –