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:
<div class="button1">
<div class="text">
<p>Skill<br /> <span class="Score" id = "html">10/10 </span> </p>
</div>
<div class="button1 Overlay">
</div>
<div class="button1">
<div class="text">
<p>Skill<br /> <span class="Score" id = "css">9/10 </span> </p>
</div>
<div class="button1 Overlay">
</div>
</div>
('.button1').mouseover(function(event) {
$(".text").attr('id');
})
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 $.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 class="button1">
<div class="text">
<p>Skill<br /> <span class="Score" id="html">10/10 </span> </p>
</div>
<div class="button1 Overlay">
</div>
</div>
<div class="button1">
<div class="text">
<p>Skill<br /> <span class="Score" id="css">9/10 </span> </p>
</div>
<div class="button1 Overlay">
</div>
</div>