Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

onMouseOver not working correctly

Recommended Posts

This is my the part that my React component returns:

<Container maxWidth="lg">
<Grid container spacing={3}>
{ monitors.map((monitor, index) =>
monitor.selected && (
onMouseOver={(e) => handleHover(e, monitor.name)}
<CardContent >
<Typography className={classes.title} variant="h5">
<Typography className={classes.status} variant="subtitle1">
<span className={monitor.active ? classes.statusActive : classes.statusInactive}>
{ monitor.active ? ' running' : ' stopped' }
<Button className={classes.button} onClick={() => handleChangingStatus(index)}>
{ monitor.active ? (
<i className="fas fa-square"></i>
) : (
<i className="fas fa-play"></i>
) }
<Button className={classes.button} onClick={() => openOptions(index)}>
<i class="fas fa-ellipsis-v"></i>
<Button className={classes.button} onClick={() => handleRemove(index)}>
<i class="fas fa-times"></i>

This is my gsap setup:

const handleHover = ({ currentTarget }, storeName) => {
gsap.to(background, {
duration: 1,
background: `url(./media/stores/${storeName.toLowerCase()}.jpg) center center`,
gsap.to(background, {
duration: 0.4,
opacity: 1,
ease: "power3.inOut"
gsap.from(background, {
druation: 0.4,
transformOrigin: "right top"
gsap.to(currentTarget, {
duration: 0.3,
skewX: 4,
ease: "power3.inOut"
const handleHoverExit = ({ currentTarget }) => {
gsap.to(currentTarget, {
duration: 0.3,
skewX: 0,
ease: "power3.inOut"
gsap.to(background, {
duration: 0.4,
opacity: 0

The problem is that I need to hover over an element inside Grid item, for example a Button, for gsap to start working. I would like to run gsap transformation as soon as I enter inside the border of Grid item.

Link to comment
Share on other sites

46 minutes ago, OSUblake said:

Hi nevo, 


It's impossible to tell what's going on from a code snippet, especially as this sounds more like a CSS issue. Can you make a minimal demo showing the issue? Just fork this CodeSandbox template.





First of all, sorry for not including everything important into the question, I am new to this. I tried recreating it in codesandbox but it worked fine,  so there must be a problem somewhere else. I will try to find an error and if I will not find it I will add the full code.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.