我正在嘗試設定資料陣列的樣式，以便當您將滑鼠懸停在它上面時，游標設定為cursor: grab;. 我嘗試使用不同的元素來實作它，
但.li{}沒有奏效.ol{}，，，，，，，，，。唯一對我有用的是，但是問題在于對于頁面上的其余元素，游標仍保留在抓取屬性上。我正在嘗試對其進行編碼，以便該元素僅與資料陣列有關。MediaComponent{}img{}imgSrc{}data{}div{}*.{} cursor:grab;
import React, { Component,useRef, setStatus, status } from 'react';
import './Turkish.css';
import turk1 from "./music/turk1.mp3";
import turk2 from "./music/turk2.mp3"
import turk3 from "./music/turk3.mp3"
import turk4 from "./music/turk4.mp3"
const data = [
{ imgSrc: 'turk1.png', audioSrc: turk1 },
{ imgSrc: 'turk2.png', audioSrc: turk3 },
{ imgSrc: 'turk3.png', audioSrc: turk4 },
{ imgSrc: 'turk4.png', audioSrc: turk2 },
];
export default class Turkish extends Component {
render() {
return (
<div>
<ol>
{data.map(({ imgSrc, audioSrc }) => (
<MediaComponent imgSrc={imgSrc} audioSrc={audioSrc} />
))}
</ol>
</div>
);
}
}
const MediaComponent = ({ imgSrc, audioSrc }) => {
const audioRef = useRef(null);
const toggleAudio = () =>
audioRef.current === null
? console.log("Audio component is not loaded yet.")
: audioRef.current.paused
? audioRef.current.play()
: audioRef.current.pause();
return (
<li>
<img src={imgSrc} onClick={toggleAudio} />
<audio
ref={audioRef}
src={audioSrc}
onLoad={() => setStatus({ ...status, isLoaded: true })}
onPlay={() => setStatus({ ...status, isPlaying: true })}
onPause={() => setStatus({ ...status, isPlaying: false })}
one rror={() => setStatus({ ...status, error: true })}
/>
</li>
);
};
有什么想法嗎？
謝謝你
-Zpo
uj5u.com熱心網友回復：
它應該可以作業ol，我猜你在你的 CSS 檔案中犯了錯誤。確保給你的 classNameol并傳入cursor: grabCSS
<ol className="olGrab">
{data.map(({ imgSrc, audioSrc }) => (
<MediaComponent imgSrc={imgSrc} audioSrc={audioSrc} />
))}
</ol>
在 CSS 中
.olGrab { cursor: grab;}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/466181.html