Question 277239 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Why hover not work after using padding top

I use padding top 120px. After using padding top hover not work properly. Why is this happening?Here is my code:

'use client';
// eslint-disable-next-line no-unused-vars
import React, { useState } from 'react';
// eslint-disable-next-line no-unused-vars
import {BsChevronCompactLeft , BsChevronCompactRight} from 'react-icons/bs';


function App() {
  // eslint-disable-next-line no-unused-vars
  const slides = [
    {
      url: 'https://images.unsplash.com/photo-1531297484001-80022131f5a1?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2620&q=80',
    },
    {
      url: 'https://images.unsplash.com/photo-1488590528505-98d2b5aba04b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80',
    },
    {
      url: 'https://images.unsplash.com/photo-1661961112951-f2bfd1f253ce?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2672&q=80',
    },

    {
      url: 'https://images.unsplash.com/photo-1512756290469-ec264b7fbf87?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2253&q=80',
    },
    {
      url: 'https://images.unsplash.com/photo-1496181133206-80ce9b88a853?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2671&q=80',
    },
  ];

  return (
    <div className="h-[484px] w-full m-auto pt-30 relative group">
      <div style={{backgroundImage:`url(${slides[0].url}`}} className="w-full h-full bg-center bg-cover duration-500"></div>
      {/* Left Arrow */}
      <div className="hidden group-hover:block absolute top-[60%] -translate-x-0 -translate-y-[50%] text-2xl rounded-full p-2 bg-black text-white courser-pointer">
        <BsChevronCompactLeft/>
      </div>
      {/* Right Arrow */}
       <div  className="hidden group-hover:block absolute top-[60%] right-5 -translate-x-0 -translate-y-[50%] text-2xl rounded-full p-2 bg-black text-white courser-pointer">
        <BsChevronCompactRight/>
       </div>
      </div>
  );
}

export default App;

Is this any problem using hover and padding top not work together?

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    i use custom padding top 30. if i use padding top 20 then also not work the hover on the top.


  2. 0

    I suggest you to be more specific with the path of your files in tailwind.config when you need hover works

    example:

    // tailwind.config.js
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

    And please do "npm run build" command to build css-file

    Thank you

    Login or Signup to reply.
  3. 0

    There’s no such class pt-30 in TailwindCSS

    See https://tailwindcss.com/docs/padding

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search