如何將轉換應用于相同的元素但處于不同的狀態：懸停-有解無憂

我正在構建一個回應式滑塊，每側都有一個導航箭頭。我希望隱藏箭頭，除非用戶將滑鼠懸停在它們上方，在這種情況下，它們將平滑過渡opacity:0到opacity: 1我喜歡的位置。然后，我希望我的 fa-icons 在懸停時具有平滑的縮放轉換（同樣，當用戶仍在滑塊內時），但我遇到了一個問題，即圖示:hover轉換（縮放）不會發生. 在我決定進行隱藏控制元件設計之前，比例轉換是有效的，所以我知道并不是轉換本身不起作用，我只是認為存在某種我似乎無法解決的層次結構沖突。

我知道我可以通過在 Javascript 中進行滑鼠移入和滑鼠移出影片來解決這個問題，并通過在一個上進行轉換和在另一個上進行影片來分離效果，但我很想知道是否有 CSS 解決方案我只是想不通？

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: darkgrey;
}

.slideShowContainer {
  display: flex;
  flex-direction: row;
  background-color: #414141;
  position: relative;
  width: 100%;
  height: 40vw;
  margin: 0 auto;
  padding: 0;
  z-index: 1;
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}

.fa-chevron-right {
  display: block;
  opacity: 0;
  font-size: 2.3vw;
  position: absolute;
  top: 50%;
  right: 0;
  color: white;
  margin: 0 5%;
  z-index: 2;
  padding: 0;
  width: auto;
  height: auto;
  background-color: transparent;
  cursor: pointer;
  transform-origin: center;
  transform: scale(1);
  transition: transform 1s linear;
}

.fa-chevron-left {
  display: block;
  opacity: 0;
  font-size: 2.3vw;
  position: absolute;
  top: 50%;
  left: 0;
  color: white;
  margin: 0 5%;
  z-index: 2;
  padding: 0;
  width: auto;
  height: auto;
  background-color: transparent;
  cursor: pointer;
  transform: scale(1);
  transition: transform 1s linear;
}

.fa-chevron-right:hover {
  transform: scale(1.2);
  transition: transform 1s linear;
}

.fa-chevron-left:hover {
  transform: scale(1.2);
  transition: transform 1s linear;
}

.slideShowContainer:hover .fa-chevron-right {
  opacity: 1;
  transition: opacity 0.3s linear;
}

.slideShowContainer:hover .fa-chevron-left {
  opacity: 1;
  transition: opacity 0.3s linear;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<body>
  <div class="slideShowContainer">
    <i id="slideRight" class="fa fa-chevron-right"></i>
    <i id="slideLeft" class="fa fa-chevron-left"></i>
  </div>
</body>

uj5u.com熱心網友回復：

有幾個問題：

您的 CSS 在特異性上被覆寫，因此您不一定總是擁有transition您想要的屬性
更改狀態更改的轉換屬性通常不起作用 - 如果可能的話，最好將所有要轉換的屬性折疊成一個逗號分隔的宣告
至關重要的是，您正在嘗試轉換scale，但這只是應用于transform屬性的轉換——沒有 CSSscale屬性

我在下面的代碼段中修復了這些問題，現在它可以按預期作業了。

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: darkgrey;
}

.slideShowContainer {
  display: flex;
  flex-direction: row;
  background-color: #414141;
  position: relative;
  width: 100%;
  height: 40vw;
  margin: 0 auto;
  padding: 0;
  z-index: 1;
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}

.fa-chevron-right {
  display: block;
  opacity: 0;
  font-size: 2.3vw;
  position: absolute;
  top: 50%;
  right: 0;
  color: white;
  margin: 0 5%;
  z-index: 2;
  padding: 0;
  width: auto;
  height: auto;
  background-color: transparent;
  cursor: pointer;
  transform-origin: center;
  transition: transform 1s linear, opacity 0.3s linear;
}

.fa-chevron-left {
  display: block;
  opacity: 0;
  font-size: 2.3vw;
  position: absolute;
  top: 50%;
  left: 0;
  color: white;
  margin: 0 5%;
  z-index: 2;
  padding: 0;
  width: auto;
  height: auto;
  background-color: transparent;
  cursor: pointer;
  transform: scale(1);
  transition: transform 1s linear, opacity 0.3s linear;
}

.fa-chevron-right:hover {
  transform: scale(1.2);
}

.fa-chevron-left:hover {
  transform: scale(1.2);
}

.slideShowContainer:hover .fa-chevron-right {
  opacity: 1;
}

.slideShowContainer:hover .fa-chevron-left {
  opacity: 1;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<body>
  <div class="slideShowContainer">
    <i id="slideRight" class="fa fa-chevron-right"></i>
    <i id="slideLeft" class="fa fa-chevron-left"></i>
  </div>
</body>

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

標籤：css

上一篇：列印頁面時洗掉行內樣式

下一篇：修復了具有行跨度的第一個表列