滑鼠懸停時影片部分標題-有解無憂

我正在嘗試為由兩部分組成的標題制作影片：“HARD”和“WARE”，第二部分的顏色更透明。

當滑鼠懸停在“HARD”字上時，顏色會正確反轉，但是當滑鼠懸停在“WARE”字上時，這不會發生，只有一種顏色會改變。我已經嘗試過使用組合器選擇器，但是沒有“前一個兄弟姐妹”的選擇器。

body {
  background-color: #171717;
}

#title {
  font-size: 10vmax;
  font-family: 'Open Sans', Calibri;
}

#hard {
    color: rgba(255, 255, 255, 1);
    transition: all 0.3s ease-in-out;
}

#hard:hover {
    color: rgba(255, 255, 255, 0.18);
}

#hard:hover   #ware {
    color: rgba(255, 255, 255, 1);
}

#ware {
    color: rgba(255, 255, 255, 0.18);
    transition: all 0.3s ease-in-out;
}

#ware:hover {
    color: rgba(255, 255, 255, 1);
}

#title span:last-child:hover   #title > span:first-child {
    color: rgba(255, 255, 255, 0.18);
}

<div id="title">
  <span id="hard">HARD</span>
  <span id="ware">WARE</span>
</div>

uj5u.com熱心網友回復：

這是一個解決方案，它在兩個規則中使用父:hover元素的狀態，這些規則將選擇器與第一個和最后一個子元素組合在一起：

body {
  background-color: #171717;
}

#title {
  font-size: 10vmax;
  font-family: 'Open Sans', Calibri;
}

#hard {
  color: rgba(255, 255, 255, 1);
  transition: all 0.3s ease-in-out;
}

#ware {
  color: rgba(255, 255, 255, 0.18);
  transition: all 0.3s ease-in-out;
}

#title:hover span:first-child {
  color: rgba(255, 255, 255, 0.18);
}

#title:hover span:last-child {
  color: rgba(255, 255, 255, 1);
}

<div id="title">
  <span id="hard">HARD</span>
  <span id="ware">WARE</span>
</div>

另外：除了第一個和最后一個孩子，您還可以在選擇器中使用 ID：

body {
  background-color: #171717;
}

#title {
  font-size: 10vmax;
  font-family: 'Open Sans', Calibri;
}

#hard {
  color: rgba(255, 255, 255, 1);
  transition: all 0.3s ease-in-out;
}

#ware {
  color: rgba(255, 255, 255, 0.18);
  transition: all 0.3s ease-in-out;
}

#title:hover #hard {
  color: rgba(255, 255, 255, 0.18);
}

#title:hover #ware {
  color: rgba(255, 255, 255, 1);
}

<div id="title">
  <span id="hard">HARD</span>
  <span id="ware">WARE</span>
</div>

uj5u.com熱心網友回復：

這是您在“ware”懸停時忘記更改不透明度的更正，除了一切都是正確的


#hard:hover {
    color: rgba(255, 255, 255, 0.18);
}

#hard:hover   #ware {
    color: rgba(255, 255, 255, 1);
}

#ware {
    color: rgba(255, 255, 255, 0.18);
    transition: all 0.3s ease-in-out;
}

#ware:hover {
  color: rgba(255, 255, 255, 0.18);
}

#ware:hover   #hard{
    color: rgba(255, 255, 255, 1);
    
}

這是你的代碼

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/410102.html

標籤：

上一篇：是否可以在PHP代碼中更改HTML？

下一篇：如何獲取DOM元素的變換矩陣？