jquery - 停止“Div”改变位置“悬停”
问题描述
我正在尝试使用 HTML、CSS 和 Jquery 构建音频播放器。我在使用 Jquery 的“悬停”方法时遇到问题。删除“背景图像”后,似乎将 div 向下移动 - 这是为什么呢?我知道这与页面的流程有关。认为我应该从头开始重新启动音频播放器,因为它有太多问题。我应该只使用 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>
解决方案
为了使其完美,需要做一些小改动。在音乐盒类(.music-box) css中添加float属性和background-position如下:
.music-box{
float:left;
background-position: center !important;
}
这在您的网站上有效,我已经在您的网站上进行了测试。
推荐阅读
- python - 对于具有 `set[int]` 值的数据,基于具有至少一个共同成员的分组存在哪些快速方法?
- sparql - 没有得到我从 Wikidata sparql 查询中查看的汇总结果
- python - 每月对数据框列进行 Winsorize,同时忽略 NaN
- java - Camel 总是将消息路由到预期 Kafka 主题的 0 分区
- google-sheets - 在 Google 表格中的单元格中的 URL 中插入动态值
- css - 如何使用 CSS 简单地更改 wordpress 中字段标签的文本?
- windows - 需要帮助从 Windows 10 .BAT 文件运行嵌套程序调用而没有“不支持 UNC 路径”错误
- java - 如何使用多个填充段格式化 Java 字符串
- discord.js - discord.js v12 | TypeError:无法读取未定义的属性“发送”
- mongodb - 如何在 mongo 中使用 $addFields 将元素添加到现有文档?