我已經嘗試了一切，但我認為我在這里有點過頭了。我創建了一個在桌面上完美運行的網站，但在移動設備上，懸停元素將無法正常作業。我正在使用 SVG 物件。
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>F1 2021: Round 22 Abu Dhabi Grand Prix</title>
</head>
<body>
<style>
.circuit-map {
position: relative;
background-image: url(/circuits/round-01/bahrain.svg);
background-position: center;
overflow: hidden;
background-size: cover;
}
.circuit-map > img {
display: block;
width: 100%;
height: 100%;
}
.circuit-map .circuit-controls {
position: absolute;
overflow: hidden;
display: flex;
transition: 0.3s;
cursor: pointer;
}
.circuit-map .circuit-controls img {
display: none;
width: calc(100%);
min-width: calc(100%);
}
.circuit-map .circuit-controls#statsLeft,
.circuit-map .circuit-controls#statsRight {
top: 0;
width: 4%;
height: 84%;
margin: 4.4% 0;
}
.circuit-map .circuit-controls#statsLeft {
left: 0;
flex-direction: row-reverse;
}
.circuit-map .circuit-controls#statsRight {
right: 0;
}
.circuit-map .circuit-controls#statsLeft:hover,
.circuit-map .circuit-controls#statsRight:hover {
width: 95.65%;
}
.circuit-map .circuit-controls#statsTop,
.circuit-map .circuit-controls#statsBottom {
left: 0;
height: 7.5%;
width: 91.5%;
margin: 0 4.25%;
}
.circuit-map .circuit-controls#statsTop {
top: 0;
flex-direction: column-reverse;
}
.circuit-map .circuit-controls#statsBottom {
bottom: 0;
flex-direction:column;
}
.circuit-map .circuit-controls#statsTop:hover,
.circuit-map .circuit-controls#statsBottom:hover {
height: 92.1%;
}
</style>
<header>
<hr style="height:1px;background-color:white">
<h1>Round 01 Bahrain Grand Prix</h1>
<h2 style="font-size: 36px;">Sakhir Circuit, Bahrain</h2>
<br>
<h2>31 Dec, 2021</h2>
</header>
<br>
<br>
<section >
<div >
<img
id="circuitImage"
src="circuit.svg"
alt="移動設備上的 SVG 物件問題"
/>
<div id="statsLeft">
<object type="image/svg xml" data="starting-grid.svg"></object></div>
<div id="statsRight">
<object type="image/svg xml" data="race-results.svg"></object></div>
<div id="statsBottom">
<object type="image/svg xml" data="sprint-results.svg"></object></div>
<div id="statsTop">
<object type="image/svg xml" data="stats-top.svg"></object></div>
</div>
<script>
const circuitImageDOM = document.getElementById('circuitImage');
function calculateStatsSizes() {
const statsXDOM = [
document.querySelector('#statsLeft object'),
document.querySelector('#statsRight object'),
];
const statsYDOM = [
document.querySelector('#statsTop object'),
document.querySelector('#statsBottom object'),
];
const parentSizes =
statsXDOM[0].parentElement.parentElement.getBoundingClientRect();
const parentWidth = parentSizes.width;
const parentHeight = parentSizes.height;
statsXDOM.forEach(stat => {
stat.style.minWidth = `${parentWidth}px`;
stat.style.display = 'block';
});
statsYDOM.forEach(stat => {
stat.style.minHeight = `${parentHeight}px`;
stat.style.display = 'block';
});
}
circuitImageDOM.addEventListener('load', calculateStatsSizes);
window.addEventListener('resize', calculateStatsSizes);
circuitImageDOM.setAttribute(
'src',
`${circuitImageDOM.getAttribute(
'src'
)}?preventCache=${Math.random()}`
);
</script>
</body>
</html>
我似乎無法在移動設備上使用它 - 作為參考，這里是發布的網站https://drivetodescribe.com/circuits/round-01/index.html。有人能幫忙嗎？
uj5u.com熱心網友回復：
您說的是在移動設備上懸停。但是，除非您將滑鼠或其他指標設備連接到移動設備（這顯然不正常），否則您不能指望在移動設備上懸停，因為它只是記錄觸摸。
通常你會使用click-event、pointerevents 之類的pointerdown或pointerup（對滑鼠和觸摸都有效）。或直接觸摸事件（如touchstartor touchend，僅適用于觸摸輸入）。
因此，您可以將概念從懸停在側面轉換為打開或關閉側面之類的東西。或者讓它們在（或）上打開并在（pointerdown或touchstart）上關閉。pointeruptouchend
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/486842.html
標籤：javascript css svg 移动的
下一篇：SVG樣式的問題