[英]How can I add a (CSS) cursor: property to elements in an array?
我正在尝试设置数据数组的样式,以便当您对其进行 hover 时,cursor 将设置为cursor: grab;
. 我尝试使用不同的元素来实现它,但都没有用, .li{}
、 .ol{}
、 MediaComponent{}
、 img{}
、 imgSrc{}
、 data{}
、 div{}
。 唯一对我有用的是*.{}
,但问题是 cursor 保留在页面上元素的 rest 的抓取属性上。 我正在尝试对其进行编码,以便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 })}
onError={() => setStatus({ ...status, error: true })}
/>
</li>
);
};
有什么想法吗?
谢谢你
-Zpo
它应该与ol
一起使用,我猜你在 CSS 文件中犯了错误。 确保将 className 提供给您的ol
并传递cursor: grab
CSS
<ol className="olGrab">
{data.map(({ imgSrc, audioSrc }) => (
<MediaComponent imgSrc={imgSrc} audioSrc={audioSrc} />
))}
</ol>
CSS
.olGrab { cursor: grab;}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.