时间戳

首页 > 解决方案 > 如何在另一个元素的焦点上使用 sass 更改背景图像

css - 如何在另一个元素的焦点上使用 sass 更改背景图像

问题描述

有一个inputBlog具有背景图像的类。我需要更改此背景图像以聚焦输入元素。

但是在SASS中找不到如何做。

JSX：

  <div className={styles.inputBlog}>
    some text
  </div>
</div>
<div className={styles.inputSection}>
  <input type="text"

现有的 CSS：

.inputBlog {
  background: url('image.png')
}
   
.inputSection {
  input {
    border-left: 0;
    
    &:focus {
      .inputBlog {
         background: url('differentimage.png');
      }
    }
  }
}

标签： cssreactjssass

解决方案

根据您当前的 JSX 方式，当您专注于 input 时，您不能使用 CSS 或 sass 来更改 inputBlog 。您唯一可以使用的是 JavaScript。所以在我添加 onFocus 和 onBlur 的地方做这样的事情，它们基本上分别检查你何时关注和关注输入组件。Image Path 代表你想在 CSS/sass 中使用的图像。由于您只发布了 JSX 的一部分，所以我只是调用这个组件，所以请使用您实际拥有的组件

import React from 'react';
import Image1 from 'image path';
import Image2 from 'image path';

const Component= () => {
    const [focused, setFocused] = React.useState(false)
const onFocus = () => setFocused(true)
const onBlur = () => setFocused(false)
  React.useEffect(() => {
    const inputBlog = document.querySelector('.inputBlog')
    if(focused){
      inputBlog.style.background = `url(${Image1})` 
   }else{
    inputBlog.style.background = `url(${Image2})` 
}


  }, [focused]);

 return (
        <div className='inputBlog' >
              some text
             </div>
         </div>
           <div className='inputSection'>
                 <input
                    type="text"
                    onFocus={onFocus} 
                    onBlur={onBlur}
    );

}

推荐阅读