How to target an id inside of a div class when I hover a different parent div class with jquery?-CodePudding

So as the question says, I am trying to hover the class button1 and get the id of 'css'. With my current code, all I get is the id html. I need to get a unique id that's pertinent to which button I hover. I'm still newer to jquery and javascript in general but I can't seem to find any information on this topic so any reference source would be great too if possible.

Here's my code:

HTML

<div >       
     <div >
          <p>Skill<br /> <span  id = "html">10/10 </span> </p>
     </div>

     <div >
     </div>
<div >       
     <div >
          <p>Skill<br /> <span  id = "css">9/10 </span> </p>
     </div>

     <div >
     </div>
</div>

Jquery

('.button1').mouseover(function(event) {
    $(".text").attr('id');
})

CodePudding user response：

With your current code you get nothing, since .text does not have ID and result is never used. Use $(this).find('.Score').attr('id')[1].

Note few bug fixes:

('.button1').mouseover is missing $
You have nested .button1 (first one is not properly closed, use proper indentation for easier debugging), so it's impossible to find singe element, because you hover on top most element

$('.button1').mouseover(function(event) {
  console.log($(this).find('.Score').attr('id'))
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <div >
    <p>Skill<br /> <span  id="html">10/10 </span> </p>
  </div>

  <div >
  </div>
</div>
<div >
  <div >
    <p>Skill<br /> <span  id="css">9/10 </span> </p>
  </div>

  <div >
  </div>
</div>