如何向数组中的元素添加 (CSS) 游标：属性？

Question

我正在尝试设置数据数组的样式，以便当您将鼠标悬停在它上面时，光标设置为 cursor: grab;。我尝试使用不同的元素来实现它 none 有效， .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 })}
                  onError={() => setStatus({ ...status, error: true })}
                />
              </li>
            );
          };

有什么想法吗？

谢谢

-Zpo

Answer 1

它应该与 ol 一起使用，我猜你在 CSS 文件中出错了。确保将 className 赋予 ol 并在 CSS

中传递 cursor: grab

<ol className="olGrab">
   {data.map(({ imgSrc, audioSrc }) => (
    <MediaComponent imgSrc={imgSrc} audioSrc={audioSrc} />
   ))}
</ol>

在CSS

.olGrab { cursor: grab;}

如何向数组中的元素添加 (CSS) 游标：属性？

How can I add a (CSS) cursor: property to elements in an array?

html

javascript

css

jquery

css-selectors