阻止'Div'改变位置'悬停'
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了阻止'Div'改变位置'悬停'相关的知识,希望对你有一定的参考价值。
我正在尝试使用html,CSS和Jquery构建一个音频播放器。我在使用Jquery的'hover'方法时遇到了麻烦。当“背景图像”被移除时,它似乎会将div移动 - 这是为什么?我理解这与页面流程有关。我想我应该从头开始重新启动音频播放器,因为它有太多错误。我应该只使用CSS悬停?
这是现场site的链接
$('.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>
答案
要做到完美,需要做一些小改动。将float属性和background-position添加到音乐盒类(.music-box)css中,如下所示:
.music-box{
float:left;
background-position: center !important;
}
这适用于您的网站,我已经在您的网站上进行了测试。
另一答案
可能会受到其他CSS / JS的干扰。我把你的代码复制到了小提琴这里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');
});
以上是关于阻止'Div'改变位置'悬停'的主要内容,如果未能解决你的问题,请参考以下文章