CODEWITHSUNDEEP
javascriptjquerycss
Polina Gilad
Polina Gilad

Reputation: 1

Check if an element is :hover or not (javascript or jquery)

I have a few divs with the same class name. When hovering on one of the divs I want to have a specific class added to the hovered one and a different class added to the not hovered divs.

I tired something with CSS but it's not working for me because in my HTML not all the divs have the same parent.

I tried to find a solution for this, but my javascript/jQuery skills are not so good. Would really appreciate a strait forward solution!

Check it out here: jsfiddle

This is my HTML structure:

<div class="container">
  <div class="row">
    <div class="project">Project 1</div>
    <div class="project">Project 2</div>
  </div>
  <div class="row">
    <div class="project">Project 3</div>
    <div class="project">Project 4</div>
  </div>
</div>

This is my CSS:

.project {
  font-size: 32px;
  padding: 20px;
  margin: 20px;
  background-color: grey;
}

.row:hover > .project, .hover {
  color: transparent;
  transition: color 0.5s ease;
  text-shadow: 0 0 8px rgba(255,255,255,0.5);
  transition: text-shadow 0.5s ease;
} 

.row:hover > .project:hover, .not-hover {
  color: #fff !important;
  transition: color 0.5s ease;
  text-shadow: none;
  transition: text-shadow 0.5s ease;
}

Upvotes: 0

Views: 473

Answers (1)

Leigh Cheri
Leigh Cheri

Reputation: 125

You can use onmouseover event on a div. with JQuery you can add the specific class to the hovered div and remove from that class from siblings. Check it out here : jsfiddle

    <div id='project1' class="project" onmouseover=$("#project1").addClass("classX").siblings().removeClass('classX')>Project 1</div>

Upvotes: 1

Related Questions