Find a class with mouseover

Question

There is an easy to find a div inside a $(document) with mouseover? I have 3 divs like this:

<div class="container1" style="height:100px; width: 100%; border: 3px solid red">
  <div class="container2">
    <div class="container3">
      
    </div>
  </div>
</div>

<div class="container4" style="height:100px; width: 100%; border: 3px solid green">
  <div class='container5'>
    
  </div>
</div>

<div class="container6" style="height:100px; width: 100%; border: 3px solid black">
  <div class='container7'>
    
  </div>
</div>

<div class="container8" style="height:100px; width: 100%; border: 3px solid yellow">
  <div class='container9'>
    
  </div>
</div>

With a simple console.log() I need to find when I move mouse over the container1 and the container4 only.

Here is a work in progress fiddle.

https://jsfiddle.net

Thank you!

Fix you fiddle. or better use Code Sample [edit] (`{}` button) — Roko C. Buljan, Feb 07 '21 at 10:35
PS: Don't use Unique selector for ClassNames - ClassNames should be general and common. Use ID instead if and only if that's a needed case. — Roko C. Buljan, Feb 07 '21 at 10:39
Did you save your jsfiddle? Link is broken. Better to include in a *snippet* `[<>]` (or code sample would suffice). — freedomn-m, Feb 07 '21 at 10:43
@freedomn-m you're right, sorry. This is the saved jsfiddle. https://jsfiddle.net/1hmnsj68/ — , Feb 07 '21 at 10:51

score 0 · Accepted Answer · answered Feb 07 '21 at 10:38

You can try using .on() specifying the event and element's classes like the following way:

$(document).on('mouseover', '.container1,.container4', function(){
    console.log($(this).attr('class'))
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container1" style="height:100px; width: 100%; border: 3px solid red">
  <div class="container2">
    <div class="container3">
      
    </div>
  </div>
</div>

<div class="container4" style="height:100px; width: 100%; border: 3px solid green">
  <div class='container5'>
    
  </div>
</div>

<div class="container6" style="height:100px; width: 100%; border: 3px solid black">
  <div class='container7'>
    
  </div>
</div>

<div class="container8" style="height:100px; width: 100%; border: 3px solid yellow">
  <div class='container9'>
    
  </div>
</div>

Find a class with mouseover

1 Answers1