Как изменить непрозрачность ползунка при наведении на изображение выше? - PullRequest
Новая
       16

Как изменить непрозрачность ползунка при наведении на изображение выше?

0 голосов
/ 14 июня 2019

Итак, у меня есть изображение, которое воспроизводит звук и меняет изображение при нажатии.У меня также есть слайдер громкости под изображением.Мой вопрос: как заставить слайдер постепенно исчезать при наведении курсора на изображение?

В данный момент слайдер появляется при наведении курсора на сам слайдер, а не на изображение.Я попытался установить непрозрачность для переменной и изменить ее с помощью JavaScript, но, похоже, это ничего не дало. 

    function CoffeeChange() {
    if (Coffee.src == "https://static.wixstatic.com/media/38d0c2_f65cba752ac3460da7a56896d1195284~mv2.png") {
        Coffee.src = "https://static.wixstatic.com/media/38d0c2_37f01de3219a4804a3cb29f39e57b48c~mv2.png"; 
    } else {
        Coffee.src = "https://static.wixstatic.com/media/38d0c2_f65cba752ac3460da7a56896d1195284~mv2.png";
    }}

    document.getElementById("Coffee").onclick = function() {
        CoffeeChange()
        var audio = document.getElementById("CoffeeAudio");
        if (audio.paused) audio.play();
        else audio.pause();
    };

    volume.addEventListener("mousemove", coffeeVolume);

    function coffeeVolume(){
        document.getElementById("CoffeeAudio").volume = document.getElementById("volume").value / 100;
    }
    .slidecontainer {
      width: 100%;
    }

    .slider {
      -webkit-appearance: none;
      width: 100px;
      height: 15px;
      border-radius: 5px;  
      background: #d3d3d3;
      outline: none;
      -webkit-transition: .2s;
      transition: opacity .2s;
      position: relative;
      top: 130px;
      opacity:0;
    }

    .slider:hover {
      opacity: 1;
    }

    .slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 25px;
      height: 25px;
      border-radius: 50%;
      background: #4CAF50;
      cursor: pointer;
    }

    .slider::-moz-range-thumb {
      width: 25px;
      height: 25px;
      border-radius: 50%;
      background: #4CAF50;
      cursor: pointer;
    }
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <div class="slidecontainer">
      <input type="range" min="0" max="100" value="100" class="slider" id="volume">
    </div>
    <img id="Coffee" src="https://static.wixstatic.com/media/38d0c2_f65cba752ac3460da7a56896d1195284~mv2.png"
    height="100" width="100">


    <audio id="CoffeeAudio" loop>
       <source src="//music.wixstatic.com/preview/38d0c2_02a2ea74abbc49a29ae7bdfabd1091d0-128.mp3" type="audio/wav" />
    </audio>

Я добавил весь код, чтобы прояснить, как я проделал то, что у меня есть, на случай, если что-нибудь может бытьпредотвращая его работу.

Ответы [ 2 ]

1 голос
/ 14 июня 2019

Вам необходимо инвертировать порядок <img> и .slidecontainer в коде: 

<img id="Coffee" src="https://static.wixstatic.com/media/38d0c2_f65cba752ac3460da7a56896d1195284~mv2.png" height="100" width="100">
<div class="slidecontainer">
  <input type="range" min="0" max="100" value="100" class="slider" id="volume">
</div>

... и используйте это 

.slidecontainer {
  opacity: 0;
  transition: opacity .3s cubic-bezier(.4, 0, .2, 1); /* optional: fade transition */
}
.slidecontainer:hover, #Coffe:hover + .slidecontainer {
  opacity: 1;
  z-index: 1; /* optional: if img and the slider overlap, you want the slider on top */
}

Кроме того, если .slidecontainer еще не позиционирован (имеет установленное значение position, отличное от static), вам необходимо указать его position:relative. Это касается случая, когда они перекрываются.

Рабочий пример: 

function CoffeeChange() {
  if (Coffee.src == "https://static.wixstatic.com/media/38d0c2_f65cba752ac3460da7a56896d1195284~mv2.png") {
    Coffee.src = "https://static.wixstatic.com/media/38d0c2_37f01de3219a4804a3cb29f39e57b48c~mv2.png";
  } else {
    Coffee.src = "https://static.wixstatic.com/media/38d0c2_f65cba752ac3460da7a56896d1195284~mv2.png";
  }
}

document.getElementById("Coffee").onclick = function() {
  CoffeeChange()
  var audio = document.getElementById("CoffeeAudio");
  if (audio.paused) audio.play();
  else audio.pause();
};

volume.addEventListener("mousemove", coffeeVolume);

function coffeeVolume() {
  document.getElementById("CoffeeAudio").volume = document.getElementById("volume").value / 100;
}
.slidecontainer {
  width: 100%;
}

.slider {
  -webkit-appearance: none;
  width: 100px;
  height: 15px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  -webkit-transition: .2s;
  transition: opacity .2s;
  position: relative;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

.slidecontainer {
  opacity: 0;
  transition: opacity .3s cubic-bezier(.4, 0, .2, 1);
}

.slidecontainer:hover,
#Coffee:hover+.slidecontainer {
  opacity: 1;
}
<img id="Coffee" src="https://static.wixstatic.com/media/38d0c2_f65cba752ac3460da7a56896d1195284~mv2.png" height="100" width="100">
<div class="slidecontainer">
  <input type="range" min="0" max="100" value="100" class="slider" id="volume">
</div>
<audio id="CoffeeAudio" loop>
   <source src="//music.wixstatic.com/preview/38d0c2_02a2ea74abbc49a29ae7bdfabd1091d0-128.mp3" type="audio/wav" />
</audio>
0 голосов
/ 14 июня 2019

Ну, одну вещь, которую вы могли бы сделать, это обернуть <img> и .slidecontainer в div и навести указатель мыши на эту оболочку, как 

   <section id="CoffeeAndSlider" onmouseover="showSlider('unhide')"onmouseout="showSlider('hide')">
            <div class="slidecontainer">
              <input type="range" min="0" max="100" value="100" class="slider" id="volume">
            </div>

            <img id="Coffee" src="https://static.wixstatic.com/media/38d0c2_f65cba752ac3460da7a56896d1195284~mv2.png"
            height="100" width="100">
     </section>

showSlider будет выглядеть как 

function showSlider(flag){
 if(flag==='unhide'){
    document.getElementById('volume').classList.add("unhide");
 }
 else if(flag==='unhide'){
 document.getElementById('volume').classList.remove("unhide");
 }
}

и, наконец, добавьте это к вашему CSS и удалите .slider: hover 

.unhide{
    opacity: 1;
}
...