Блог

У меня есть одно большое изображение вверху и три меньших изображения внизу моей страницы. Я хочу сделать так, чтобы при наведении курсора на маленькое изображение (это также ссылка, которая ведет в другое место) большое изображение менялось на это маленькое изображение. Итак, ясно объяснено, что два изображения меняются местами / меняются местами. И когда я открываю, большое изображение возвращается обратно. Я попробовал пару решений, но это не сработало, поэтому у меня проблемы, не могли бы вы мне помочь?

Я ищу CSS / Javascript-решение, А НЕ JQUERY!

Спасибо и извините за беспокойство!

 import React from "react";
import { Link } from "react-router-dom";
import "../screens/StyleName.css";
import { Card } from "react-bootstrap";
import Categories from "../components/Categories.json";
import { useLocation } from "react-router-dom";

// images:
import LargeImage from "../images/largeimage.jpg;
import SmallImage1 from "../images/small_image1.jpg";
import SmallImage2 from "../images/small_image2.jpg";
import SmallImage3 from "../images/small_image3.jpg";
import Placeholder from "../images/placeholder.jpg";

function FunctionName() {

  let location = useLocation();

  const ShowImage = (ImageName) => {
    if (ImageName === "SmallImage1") {
      return SmallImage1;
    } else if (ImageName === "SmallImage2") {
      return SmallImage2;
    } else if (ImageName === "SmallImage3") {
      return SmallImage3;
    } else {
      return Placeholder;
    }
  };

  const AllCategories = () => {
    return Categories.map((category, index) => {
      const data = () => {
        if (category.children) {
          return { data: category.children };
        } else {
          return { data: undefined };
        }
      };
      return (
        <div key={index} className="category-card">
          <Card style={{ border: "none" }}>
            <Link
              to={{
                pathname: location.pathname   "/"   category.name,
                state: data(),
              }}
              className="category-link link"
            >
              <div className="img__wrap">
                <Card.Img
                  variant="top"
                  alt="card-img-top"
                  className="small-img-down img-responsive img__img"
                  src={ShowImage(category.name)}
                />
                <p className="img__description">{category.name}</p>
              </div>
            </Link>
          </Card>
        </div>
      );
    });
  };

  return (
    <div className="maincategory-top">
      <div className="category-container">
        <div className="col-sm-8">
          <Link to="/product" className="category-link link">
            <Card.Img
              alt="card-img-top"
              className="big-img img-responsive"
              src={LargeImage}
            />
          </Link>
          <div className="row">{AllCategories()}</div>
        </div>
      </div>
    </div>
  );
}

export default FunctionName;
 

CSS:

 .big-img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 3%;
  overflow: auto;
  width: 470px;
  height: 300px;
}
.category-container {
  padding-left: 8%;
  padding-bottom: 10%;
  margin-top: 10%;
}
.card-title-main {
  font-size: 10px;
  letter-spacing: 1.2px;
  font-weight: normal;
  text-transform: uppercase;
}
a.category-link:link {
  color: black;
  background-color: transparent;
  text-decoration: none;
}
a.category-link:visited {
  color: black;
  background-color: transparent;
  text-decoration: none;
}
a.category-link:hover {
  color: black;
  background-color: transparent;
  text-decoration: none;
}
a.category-link:active {
  color: black;
  background-color: transparent;
  text-decoration: none;
}
.category2 {
  margin-top: 1%;
  text-align: center;
}
.small-img-down {
  width: 120px;
  height: 80px;
  margin-right: 13px;
  margin-bottom: 13px;
  display: inline-block;
}
.small-img-down:hover {
  transform: scale(0.9);
}
.category-card {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.img__wrap:hover .img__description {
  visibility: visible;
  opacity: 1;
  padding: 20px;
}
.img__description {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-transform: uppercase;
  background: rgba(245, 245, 245, 0.363);
  color: black;
  letter-spacing: 1.2px;
  text-align: center;
  visibility: hidden;
  font-size: 16px;
  opacity: 0;
  transition: opacity 0.2s, visibility 0.2s;
}
 

 () => {
const default_large = "image_one"
const [largeImage, setLargeImage] = useState(default_large);
     return(
        <div>
          <img 
           src={image_one} 
           onMouseEnter={() => setLargeImage("image_one")}
           onMouseOut={() => setLargeImage(default_large)} 
           className={largeImage === "image_one" ? "large" : "small"}
          />
        <img 
           src={image_two} 
           onMouseEnter={() => setLargeImage("image_two")}
           onMouseOut={() => setLargeImage(default_large)} 
           className={largeImage === "image_two" ? "large" : "small"}
          />
         <img 
           src={image_three} 
           onMouseEnter={() => setLargeImage("image_three")}
           onMouseOut={() => setLargeImage(default_large)} 
           className={largeImage === "image_three" ? "large" : "small"}
          />
        </div>
     )
}
 

В вашем css.

 img.large{
     width: 500px
}

img.small{
     width: 100px
}
 

Объяснение:
Следите за тем, какое изображение является большим в состоянии вашего компонента. Всякий раз, когда изображение наведено, соответствующим образом обновляйте состояние. После события наведения верните состояние к состоянию по умолчанию. Изображение будет иметь класс «large» при наведении курсора, а при наведении курсора ни на одно изображение большое изображение по умолчанию будет большим.