CODEWITHSUNDEEP
htmlcss
SNos
SNos

Reputation: 3470

Hover effect on other DIV not working

I am trying to using hover effect on a container using 3 different divs that when in hover, it needs to change the padding size.

I have tried using +, >, ~ but nothing seems to work.

#menu_sym {
  left: 0px;
  font-size: 40px;
  color: rgba(0, 0, 0, 1);
  position: fixed;
  z-index: 9999;
  margin-top: 40px;
  margin-right: 0px;
  line-height: 0;
}
.line_triple {
  padding-top: 7px;
  cursor: pointer;
}
#line_1 {
  padding-left: 7px;
}
#line_2 {
  padding-left: 10px;
}
#line_3 {
  padding-left: 0px;
}
#menu_sym:hover > #line_1,
#line_2,
#line_3 {
  padding-left: 0px;
}
<div id="menu_sym">

  <div id="triple_line">

    <div class="line_triple" id="line_1">&#x2014;</div>
    <div class="line_triple" id="line_2">&#x2014;</div>
    <div class="line_triple" id="line_3">&#x2014;</div>

  </div>

</div>

Upvotes: 0

Views: 54

Answers (3)

TylerH
TylerH

Reputation: 21098

The ones you've tried, > + ~, aren't appropriate for the structure you have.

> is the child selector, or more effectively called the immediate child selector, so it's only applicable in an immediate parent-child relationship.

+ is an adjacent sibling selector, so it's only applicable when you're trying to select the very next element at the same hierarchy level.

~ is a general sibling selector, so it's only applicable when you're trying to select any element at the same hierarchy level.

Instead, you can just use the following selectors:

#menu_sym {
  left: 0px;
  font-size: 40px;
  color: rgba(0, 0, 0, 1);
  position: fixed;
  z-index: 9999;
  margin-top: 40px;
  margin-right: 0px;
  line-height: 0;
}
.line_triple {
  padding-top: 7px;
  cursor: pointer;
}
#line_1 {
  padding-left: 7px;
}
#line_2 {
  padding-left: 10px;
}
#line_3 {
  padding-left: 0px;
}
#menu_sym:hover #line_1, #menu_sym:hover #line_2, #menu_sym:hover #line_3 {
  padding-left: 0px;
}
<div id="menu_sym">

  <div id="triple_line">

    <div class="line_triple" id="line_1">&#x2014;</div>
    <div class="line_triple" id="line_2">&#x2014;</div>
    <div class="line_triple" id="line_3">&#x2014;</div>

  </div>

</div>

Upvotes: 1

Daniel Arad
Daniel Arad

Reputation: 26

if i've understood what you've ment you need to make a transition. to change the size. and you need to do it one by one

#line_1{
    padding-left:7px;
    transition: padding 0.3s;
}
#line_2{
    padding-left:10px;
    transition: padding 0.3s;
}
#menu_sym:hover #line_1{
    padding:opx;
#menu_sym:hover #line_2{
    padding:opx;

and you need to noticed that you put the divs immediately after the container (on the html).

Upvotes: 0

Leonid Lazaryev
Leonid Lazaryev

Reputation: 326

Try this.

#menu_sym {
  left: 0px;
  font-size: 40px;
  color: rgba(0, 0, 0, 1);
  position: fixed;
  z-index: 9999;
  margin-top: 40px;
  margin-right: 0px;
  line-height: 0;
}
.line_triple {
  padding-top: 7px;
  cursor: pointer;
}
#line_1 {
  padding-left: 7px;
}
#line_2 {
  padding-left: 10px;
}
#line_3 {
  padding-left: 0px;
}
#menu_sym:hover #triple_line #line_1,
#menu_sym:hover #triple_line #line_2,
#menu_sym:hover #triple_line #line_3 {
  padding-left: 0px;
}
<div id="menu_sym">

  <div id="triple_line">

    <div class="line_triple" id="line_1">&#x2014;</div>
    <div class="line_triple" id="line_2">&#x2014;</div>
    <div class="line_triple" id="line_3">&#x2014;</div>

  </div>

</div>

Upvotes: 0

Related Questions