如何解决如何在反应内联样式中实现CSS悬停效果?
我正在尝试使用react inline样式在react组件中实现悬停效果。
const InfoWindow: React.FC<IInfoWindowProps> = ({ room }) => {
const info_window_image = {
width: "100%",height: "168px",background: `url(${room.pictures[0].image.large}) no-repeat`,backgroundSize: "contain",cursor: 'pointer'
};
return (
<div className="info_window_container">
<div style={info_window_image} />
</div>
)
};
info_window_container 下的div标签获取样式对象 info_window_image 。
我可以成功地从API接收图像,但是当用户将图像悬停在组件中时,我想提供放大动画。
我将className赋予div并在CSS文件中设置了样式,但是它不起作用。我在CSS文件中声明的样式无法渲染。
如何在react-inline样式中进行悬停或聚焦效果?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。