Реагировать js: изменить img на Div с помощью onMouseOver - PullRequest
Новая
       61

Реагировать js: изменить img на Div с помощью onMouseOver

0 голосов
/ 22 апреля 2020

Мне нужна ваша помощь :) (но сначала извините за мой приблизительный английский sh ...).

Я хотел бы изменить 'img sr c' в 'div- img ', когда я нахожу мышку на один из балансов' a '... Я пробую onMouseOver, но я потерпел неудачу: (

Есть изображение' a ', которое заменяет изображение в' div-img '

РЕДАКТИРОВАТЬ: Хорошо, вот почти полный код, чтобы действительно увидеть проблему: 

@observer
export default class Home extends React.Component {
  static readonly language = "language";
  private static readonly en = "en";
  private static readonly fr = "fr";

  @observable private static selectLanguage = false;

  public render(): ReactElement {
    if (Home.selectLanguage) {
      return (
        <div style={{ height: '100vh', width: '100vw', overflow: 'hidden'}}>
          <MyHead />
          <body style={{backgroundColor: 'rgb(51, 63, 72)'}}>
            <div style={{ 
              maxWidth: '1150px',
              height: '300px',
              margin: 'auto',
             }}>
               <div style={{ display: 'flex', maxWidth: '450px'}}>
                <img style={{
                  maxWidth: '100%',
                  margin: 'auto'
                }}
                src='/images/***.png'/>
               </div>
            </div>

            <div style={{
              display: 'flex',
              flexWrap: 'wrap',
              position: 'absolute',
              top: '50%',
              left: '50%',
              transform: 'translate(-50%, -50%)',
              zIndex: 1,
              }}>

              <a href="/fr/" onClick={_ => { localStorage.setItem(Home.language, Home.fr); }} >
                <span className= 'shadow'>
                  <div style={{ margin: '0 15px', padding: '75px', backgroundColor: 'rgb(175, 39, 47)', clipPath: 'polygon(0 0, 100% 8%, 100% 92%, 0 100%)'}} >  
                    <h2>Français</h2>
                  </div>
                </span>
              </a>

              <a href="/en/" onClick={_ => {localStorage.setItem(Home.language, Home.en);}}>
                <span className= 'shadow'>
                  <div style={{ margin: '0 15px', padding: '75px', backgroundColor: 'rgb(175, 39, 47)', clipPath: 'polygon(0 8%, 100% 0, 100% 100%, 0 92%)'}}>
                    <h2>English</h2>
                  </div>
                </span>
              </a>

            </div>

            <main style={{filter: 'blur(4px)'}}>
              <component1 />
              <component2 />
            </main>

          </body>
        </div>
      )
    }

Большое спасибо заранее!

1 Ответ

0 голосов
/ 22 апреля 2020

Я сделал несколько изменений в вашем коде, во-первых, я использую mouseOnEnter вместо mouseOnHover, и я также добавил mouseOnLeave для сброса изображения (потому что в вопросе, который вы упомянули, вы хотите изменить изображение, когда Вы пропускаете тег (Link).

Мое решение использует ловушку реакции useState, onMouseEnter для div устанавливает случайное изображение, используя

https://i.picsum.photos/id/ $ {Math.floor (Math.random () * 1084)} / 50 / 50.jpg

https://i.picsum.photos/id/ {image_id} / {width} / {height} .jpg

https://i.picsum.photos/id/50/50/50.jpg

OnMouseEnter состояние обновляется до изображений sr c / location и сбрасывается в '' onMouseLeave. Также я добавил 

style={{ width: '50px', height: '50px' }}

для div, чтобы div-элементы не перемещались при наведении курсора на ссылки в примере кода. 50px также высота изображения. 

import React, { useState } from 'react'

const testCode = () => {
const [image, setImage] = useState('')
return (
    <>
      <div className="div-img" style={{ width: '50px', height: '50px' }}>
        <img src={image} />
      </div>
      <div>
        <a href="/fr/" onMouseEnter={() => setImage(`https://i.picsum.photos/id/${Math.floor(Math.random() * 1084)}/50/50.jpg`)} onMouseLeave={() => setImage('')}>
          <span className="shadow">
            <div>
              <h2>Lorem</h2>
            </div>
          </span>
        </a>
        <a href="/en/" onMouseEnter={() => setImage(`https://i.picsum.photos/id/${Math.floor(Math.random() * 1084)}/50/50.jpg`)} onMouseLeave={() => setImage('')}>
          <span className="shadow">
            <div>
              <h2>Lorem</h2>
            </div>
          </span>
        </a>
      </div>
    </>
  )
}

export default testCode

Обновлено: Использование класса React 

import React, { Component } from 'react'

class sampleCode extends Component {

  constructor(props) {
    super(props);
    this.state = { image: '' };
  }

  setImage = (imagePath) => {
    this.setState({ image : imagePath })
  }

  render() {
    return (
      <>
        <div className="div-img" style={{ width: '50px', height: '50px' }}>
          <img src={this.state.image}/>
        </div>
        <div>
          <a href="/fr/"
             onMouseEnter={() => this.setImage(`https://i.picsum.photos/id/${Math.floor(Math.random() * 1084)}/50/50.jpg`)}
             onMouseLeave={() => this.setImage('')}>
          <span className="shadow">
            <div>
              <h2>Lorem</h2>
            </div>
          </span>
          </a>
          <a href="/en/"
             onMouseEnter={() => this.setImage(`https://i.picsum.photos/id/${Math.floor(Math.random() * 1084)}/50/50.jpg`)}
             onMouseLeave={() => this.setImage('')}>
          <span className="shadow">
            <div>
              <h2>Lorem</h2>
            </div>
          </span>
          </a>
        </div>
      </>
    )
  }
}

export default sampleCode

Надеюсь, это поможет:)

...