我有一個演示應用程式，我想在其中顯示播放和暫停圖示。我可以制作播放和暫停圖示。但是還有另一個要求我需要在懸停時顯示PLAY和PAUSE文本
我面臨兩個問題。
- 當我懸停到按鈕時，我的圖示在上方跳躍
- PLAY 或 PAUSE 文本不居中。（顯示略低于 ）
- 如何根據狀態顯示不同的文本；
這是我的代碼 https://jsbin.com/qifigeruti/3/edit?html,css,js,output
.container {
padding: 8px;
border: 1px solid;
display: inline-block;
}
.text {
display: none;
}
.button {
border: 0;
background: transparent;
box-sizing: border-box;
width: 0;
height: 20px;
border-color: transparent transparent transparent #202020;
transition: 100ms all ease;
cursor: pointer;
border-style: solid;
border-width: 10px 0 10px 20px;
padding: 0
}
.button.paused {
border-style: double;
border-width: 0px 0 0px 20px;
}
.button:hover {
border-color: transparent transparent transparent #404040;
}
.button:hover span {
display: inline;
}<div class="container">
<button class='button'>
<span class="text">Play</span>
</button>
</div>uj5u.com熱心網友回復：
您可以將它與 對齊flex，像這樣過渡到容器：
function onToggle() {
document.getElementById("clicked").classList.toggle("button");
document.getElementById("clicked").classList.toggle("pauseicon");
}.container {
padding: 10px;
border: 1px solid;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.2s linear;
}
.text-1,
.text-2 {
display: none;
}
.button {
border: 0;
background: transparent;
box-sizing: border-box;
width: 0;
height: 20px;
border-color: transparent transparent transparent #202020;
transition: 100ms all ease;
cursor: pointer;
border-style: solid;
border-width: 10px 0 10px 20px;
padding: 0
}
.button.paused {
border-style: double;
border-width: 0px 0 0px 20px;
}
.pauseicon {
border-left: 10px solid #000;
border-right: 10px solid #000;
width: 10px;
height: 25px;
}
.button:hover {
border-color: transparent transparent transparent #404040;
}
.button:hover .text-1 {
display: inline;
}
.pauseicon:hover~.text-2 {
display: inline;
}<div class="container">
<button class='button' id="clicked" onclick="onToggle()"></button>
<span class="text-1">Play</span>
<span class="text-2">Pause</span>
</div>作業小提琴
uj5u.com熱心網友回復：
用于在懸停時切換圖示或文本。我建議使用Font Awesome 庫。
而不是.png影像，因為它使用類名來放置圖示，這使得使用 jquery 更改圖示變得容易。
您可以使用 jquery (
.hover) https://api.jquery.com/hover/在 (
.hover) 函式中，您可以檢查 div 是否具有類 https://api.jquery.com/hasclass/然后你可以洗掉一個類https://api.jquery.com/removeclass/并添加另一個類。
如果你使用 Font Awesome，一旦你改變了類名，圖示就會改變。
此外，如果您可以切換班級名稱，您還可以更改文本。
樣本
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--===============================================================================================-->
<link href="../Assets/Fonts/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<!--===============================================================================================-->
<script src="../Scripts/JQuery/jquery-3.2.1.min.js"></script>
<!--===============================================================================================-->
<style>
#icon {
width: 100px;
height: 50px;
border: 1px solid #000;
font-size: 25px;
display: flex;
align-content: center;
align-items: center;
padding: 5px;
}
</style>
<script>
$(document).ready(function() {
$("#icon").click(function() {
if ($("#icon i").hasClass('fa-play')) {
$("#icon i").removeClass("fa-play").addClass("fa-pause");
$("#icon span").text('pause');
} else {
$("#icon i").removeClass("fa-pause").addClass("fa-play");
$("#icon span").text('play');
}
});
});
</script>
</head>
<body>
<div id="icon">
<i class="fa fa-play" aria-hidden="true"></i>
<span>Play</span>
</div>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/370598.html
標籤：javascript html css