如何在 React 中悬停时转换背景图像答案

【问题标题】：How to transform background Image on hover in React如何在 React 中悬停时转换背景图像
【发布时间】：2020-05-20 19:21:42
【问题描述】：

我的目的是在用户鼠标进入 1.5 倍时将背景图像缩放，但我的尝试证明失败了。这是我的代码：

import React from 'react';
import Slider from './index';
import horizontalCss from './css/horizontal.scss';
import content from './content';
import SourceView from './SourceView';
import './css/styles.scss';

function Autoplay() {
	return (
		<div>
			
			<Slider classNames={horizontalCss} autoplay={3000}>
				{content.map((item, index) => (
					<div
						key={index}

						style={{ background: `url('${item.image}') no-repeat center center`, 
                           '&:hover': {
							background: 'white',
							transform: 'scale(1.5)',
							}, }}
					>
						<div className="center">
							<div className="textWrapper">
							<h2>{item.title}</h2>
							</div>
						</div>
					</div>
				))}
			</Slider>
			
		</div>
	);
}

export default Autoplay;

我必须做哪些调整才能完成这项工作

【问题讨论】：

这不是真正的 React 问题，CSS 内联样式没有添加伪类效果的选项。您需要将效果放在一个类中，并设置您的反应组件的className。

标签： javascript css reactjs

【解决方案1】：

正如人们之前提到的，这不是 React 的问题。相反，HTML 中的 style 属性不支持 CSS 选择器，例如 :hover。另请注意，&:hover 不是有效的 CSS，而是由您选择的 webpacker 预处理的有效 SCSS。

但是，<div> 的特定悬停样式不会对任何内容做出反应，因此可以将它们放在一个类中

.my-image-class {
  background-repeat: no-repeat;
  background-position: center;

  &:hover {
    background: white;
    transform: scale(1.5);
  }
}

然后你可以在不悬停时切换背景图像

<div
  key={index}
  className="my-image-class"
  style={{ background: `url('${item.image}') }} 
>

奖励：您可能会想得更远，并且还想让您悬停图像响应式，而这种策略会失败。 Kalabasa 有一个很好的答案，它使用动态 CSS 变量 (MDN docs) 作为响应式类属性。

你可以在课堂上这样陈述你的背景：

.my-image-class {
  background-image: var(--my-image);
  background-repeat: no-repeat;
  background-position: center;

  &:hover {
  background-image: var(--hover-image);
    transform: scale(1.5);
  }
}

然后动态改变变量

<div
  key={index}
  className="my-image-class"
  style={{ '--my-image': `url(path)`; '--hover-image': `url(other-path)` }} 
>

【讨论】：

【解决方案2】：

内联样式不支持 pseudo selectors，您需要将悬停样式 css 移动到您的 styles.scss 并尝试使用 className 或 id 代替

【讨论】：

【解决方案3】：

你在寻找这样的东西吗？ Repro on stackblitz 当你悬停它时它会缩放块。这是 Stackblitz 不起作用的代码：

css：

html, body, #app {
  margin: 0;
  padding: 0;
  position: relative;
}
.app-component{
  position: absolute;
  width: 300px;
  height: 200px;
  background-image: url('https://picsum.photos/200/300');
  background-size: cover;
  border: 1px solid black;
  top:100px;
  left:100px;
}

.app-component:hover{
  transform: scale(1.5);
  transition:transform 1s linear;
}

应用程序：

import React, { Component } from 'react';
import { render } from 'react-dom';
import './style.css';

const App = () => {
    return (
      <div className="app-component">
      </div>
    );
}

render(<App />, document.getElementById('root'));

你需要在你的css中做，尽可能避免使用内联样式。

【讨论】：