Остановить «Div» от изменения положения «зависания»

Question

Я пытаюсь собрать аудиоплеер, используя HTML, CSS и Jquery.У меня проблемы с методом hover с использованием Jquery.Кажется, что смещение div вниз, когда 'background-image' удаляется - почему это?Я понимаю, что это связано с потоком страницы.Подумав, я должен снова запустить аудиоплеер с нуля, так как в нем слишком много проблем.Должен ли я просто использовать CSS наведения?

Вот ссылка на живой сайт

$('.music-box').hover(function() {
  $('.music-box').css("border", "1px solid black");
  $('.music-box').css("background", "none");
  $('.player').css('display', 'block');
  $('.music-details').css('display', 'block');
  $('.buyDiv').css('display', 'block');
});
$('.music-box').mouseleave(function() {
  $('.music-box').css("border", "none");
  $('.music-box').css("background", "url('junction.jpg')");
  $('.music-box').css("background-size", "contain");
  $('.music-box').css("background-repeat", "no-repeat");
  $('.player').css('display', 'none');
  $('.music-details').css('display', 'none');
  $('.buyDiv').css('display', 'none');
});		

.junction {
  display: inline;
  padding: 2vw; 
}
.music-box {
  background: url(junction.jpg);
  background-size: contain;
  background-repeat: no-repeat;
  position: relative;
  width: 16vw;
  cursor: pointer;
  height: 30vh;
  display: inline-block;
}
.music-details {
  display: none;
  position: relative;
  top: 5vh;
  text-transform: uppercase;
  font-size: 1vh;
  font-family: 'Nunito Sans', sans-serif;
  letter-spacing: 0.5px;
  font-weight: normal;
}
.appleLink {
  height: 3vh;
  width: auto;
}
.player {
  display: none;
  position: relative;
  top: 7vh;
}
.buyDiv {
  display: none;
  height: 3vh;
  top: 9vh;
  width: auto;
  position: relative;
}
.buyList {
  position: relative;
  padding: 0;
  margin: 0;
}
.buyList li {
  display: inline;
  cursor: pointer;
}
.buyFnt {
  text-transform: uppercase;
  font-size: 1vh;
  font-family: 'Nunito Sans', sans-serif;
  letter-spacing: 0.5px;
  font-weight: normal;
  display: inline;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li class="junction">
  <div class="music-box">
    <h3 class="music-details">Junction - EP
      <br>
      <br>
      Turn Around (feat Madi Lane)
      <br>
      <br>
      My Nu Leng - 2018
    </h3>
    <audio id="player" src="tune.mp3"></audio>

    <div class="player"> 
      <button onclick="document.getElementById('player').play()"><img class="playBtn" src="playBtn.png"></button> 
      <button onclick="document.getElementById('player').pause()"><img class="stopBtn" src="stopBtn.png"></button> 
      <button onclick="document.getElementById('player').volume += 0.1"><img class="volUp" src="volUp.png"></button> </button> 
      <button onclick="document.getElementById('player').volume -= 0.1"><img class="volDown" src="volDown.png"></button> </button> 
    </div>
      <div class="buyDiv">
        <ul class="buyList">
          <li class="buyFnt">BUY</li>
          <li><button><img class="appleLink" src="apple.png"></button></li>
        </ul>
      </div>
  </div>
</li>

Answer 1

есть небольшие изменения, которые нужно сделать, чтобы сделать его идеальным.Добавьте атрибут float и background-position к классу музыкальной шкатулки (.music-box) css следующим образом:

.music-box{
     float:left;
     background-position: center !important;
}

Это сработало на вашем сайте, и я проверил на вашем сайте.

Answer 2

Могут быть помехи от других CSS / JS.Я скопировал ваш код в Fiddle здесь https://jsfiddle.net/Lkm4fotd/1/

HTML

<ul class="first-row">


                        <li class="junction">
                            <div class="music-box">
                                <h3 class="music-details">Junction - EP
                                    <br>
                                    <br>
                                    Turn Around (feat Madi Lane)
                                    <br>
                                    <br>
                                    My Nu Leng - 2018
                                </h3>
                                <audio id="player" src="tune.mp3"></audio>

                                <div class="player"> 
                                  <button onclick="document.getElementById('player').play()"><img class="playBtn" src="playBtn.png"></button> 
                                  <button onclick="document.getElementById('player').pause()"><img class="stopBtn" src="stopBtn.png"></button> 
                                  <button onclick="document.getElementById('player').volume += 0.1"><img class="volUp" src="volUp.png"></button>  
                                  <button onclick="document.getElementById('player').volume -= 0.1"><img class="volDown" src="volDown.png"></button>  
                                </div>
                                    <div class="buyDiv">
                                        <ul class="buyList">
                                            <li class="buyFnt">BUY</li>
                                            <li><button><img class="appleLink" src="apple.png"></button></li>
                                        </ul>
                                    </div>
                            </div>
                        </li>

                    </ul>

CSS: Ваш файл CSS

JS:

$('.music-box').hover(function() {
    $('.music-box').css("border", "1px solid black");
    $('.music-box').css("background", "none");
    $('.player').css('display', 'block');
    $('.music-details').css('display', 'block');
    $('.buyDiv').css('display', 'block');
});
$('.music-box').mouseleave(function() {
    $('.music-box').css("border", "none");
    $('.music-box').css("background", "url('https://benjamingibbsportfolio.000webhostapp.com/junction.jpg')");
    $('.music-box').css("background-size", "contain");
    $('.music-box').css("background-repeat", "no-repeat");
    $('.player').css('display', 'none');
    $('.music-details').css('display', 'none');
    $('.buyDiv').css('display', 'none');
});