CODEWITHSUNDEEP
htmlcss
Rahul Kashyap
Rahul Kashyap

Reputation: 977

Hover effect is not working: Div color is not changed when hovering over a <a> anchor tag

I'm trying to change the div color by hovering over an anchor tag but when I am but nothing is happening, here is my code below and jsfiddel link https://jsfiddle.net/rhulkashyap/udvzanqz/.

HTML & CSS 

.hover-me{
  margin-bottom:50px;
  display:block;
}
.change{
  width:200px;
  height:200px;
  background:#00ACC1;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  font-size:20px;
  color:#fff;
}

.hover-me:hover .change{
  background:#00796B;
}
<a href="#" class="hover-me">Change Div color by hovering me</a>

<div class="change">Hello Universe</div>

Upvotes: 2

Views: 66

Answers (4)

Amuk Saxena
Amuk Saxena

Reputation: 1571

.hover-me:hover ~ .change{
  background:#00796B;
}

Upvotes: 1

prajakta
prajakta

Reputation: 162

This is working perfectly however you want: 

.hover-me:hover + .change{
      background:#00796B;
    }

here is working jsFiddle demo : https://jsfiddle.net/udvzanqz/2/

Upvotes: 3

Harsh Sanghani
Harsh Sanghani

Reputation: 1712

Just change your css as following :-

.hover-me:hover+.change{
    background:#00796B;
}

It may help you.

Upvotes: 1

Nenad Vracar
Nenad Vracar

Reputation: 122047

You need to use sibling selector

.hover-me{
  margin-bottom:50px;
  display:block;
}
.change{
  width:200px;
  height:200px;
  background:#00ACC1;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  font-size:20px;
  color:#fff;
}

.hover-me:hover ~ .change{
  background:#00796B;
}
<a href="#" class="hover-me">Change Div color by hovering me</a>
<div class="change">Hello Universe</div>

Upvotes: 5

Related Questions