Блог

Главная - Вопросы по программированию - Как применить css только к тому конкретному значку, на который наведен указатель мыши, когда значки являются частью цикла

Как применить css только к тому конкретному значку, на который наведен указатель мыши, когда значки являются частью цикла

#javascript #css #reactjs

#javascript #css #reactjs

Вопрос:

Это делает все значки DeleteRoundedIcon видимыми или невидимыми всякий раз, когда мышь наводится на любой из значков DeleteRoundedIcon, поскольку все они являются частью цикла. Я хочу применить этот стиль только к значку, на который в данный момент наведен указатель мыши. Значки являются значками material-ui. Как это сделать???

 const [iconOpacity, setIconOpacity] = useState(0);

<div className = "chat__body">
    {messages.map(function(message, index) {
        {
            return (
                <p>
                    <span className="chat__desc">{message.message}</span>
                    <span className="chat__timestamp">{message.timestamp}</span>
                    <IconButton
                        onMouseOver={() => setIconOpacity(1)} onMouseOut={() => setIconOpacity(0)}
                        onClick={() => deleteClicked(index)}
                        style={{padding: "0", opacity: iconOpacity}}>
                            <DeleteRoundedIcon fontSize="small"/>
                        </IconButton>
                </p>
            );
        }
    }}
</div>

Комментарии:

1. Почему бы не использовать css-способ использования :hover псевдокласса для обработки того же самого?

Ответ №1:

Как общее правило и примечание для себя: всякий раз, когда есть простое CSS-решение проблемы, не используйте javascript для ее решения. Вы можете просто решить свою проблему с помощью hover псевдокласса; в этом случае всякий раз, когда вы наводите курсор на любой из DeleteRoundedIcon, только этот значок изменит внешний вид:

 <div className = "chat__body">
{messages.map(function(message, index) {
    {
        return (
            <p>
                <span className="chat__desc">{message.message}</span>
                <span className="chat__timestamp">{message.timestamp}</span>
                <IconButton
                    onClick={() => deleteClicked(index)}
                    className="roundedIcon">
                        <DeleteRoundedIcon fontSize="small"/>
                    </IconButton>
            </p>
        );
    }
}}

и в вашем файле стиля:

  .roundedIcon{  
    padding: "0";  
    opacity: 0;
}
.roundedIcon:hover{  
    opacity:1;
}