I use react-google-maps , and the embedded components of GoogleMap and InfoWindow , where I fill the latter with the following contents:

  <div className = 'infoWindow' onMouseOver={()=>{ $('.infoWindow').find('.additionalData').slideToggle(); }}> <h3>{curr.name}</h3> <div className='imgContainer'> <img src={icon} alt=''/> </div> <div className='additionalData'> <div className = 'phoneNumber'>{curr.phone}</div> <div className = 'address'>{curr.address}</div> </div> </div>

It turns out that when you hover on .infoWindow , all .additionalData starts to slide at once. I tried to index id, but onMouseOver already attached to the first element and when you hover on any of the others, the first one slides. Surely there is a way to transfer the current element to a function and already work with it there, but I can’t find it, with jQuery I’m familiar with it for a couple of days.

    1 answer 1

    This select $('.infoWindow').find('.additionalData').slideToggle(); will always return .additionalData from the first found .infoWindow . You need to search for .additionalData relative to the current DOM element, and not across the entire page.

    As far as I remember, the first argument passes an event object. It has a target property that refers to the DOM element in which the event occurred (that is, the .infoWindow you .infoWindow ).

    Total we get:

     <div className = 'infoWindow' onMouseOver={(event)=>{ $(event.target).find('.additionalData').slideToggle(); }}> // Пропущено </div>