CODEWITHSUNDEEP
htmlcss
kamillimi
kamillimi

Reputation: 49

CSS element do not hide second bloks

Why "zawartosc prawo" do not hide "zawartosc lewo"? on hover effect? I try change class name, add ID, and another, but still do not work :(

Maybe I must try add some JS? But I think someone know how to do this.

Code

.zamieniamlewo {
  display: none;
}

.prawo:hover ~ .zamieniamlewo {
  display: block !important;
}

.lewo:hover ~ .prawo {
  display: none;
}

.zamieniamprawo {
  display: none;
}

.lewo:hover ~ .zamieniamprawo {
  display: block !important;
}

.lewo {
  background: red;
  padding: 20px;
}

.prawo {
  background: green;
  padding: 20px;
}
<div class="lewo">
  <h3>Zawartość lewo</h3>
</div>


<div class="prawo">
  <h3>Zawartość prawo</h3>
</div>

<div class="zamieniamlewo">

  <h3 class="imie">zamieniamlewo</h3>

</div>

<div class="zamieniamprawo">

  <h3>zamieniam prawo</h3>

</div>

Upvotes: 0

Views: 84

Answers (2)

Ankit Prajapati
Ankit Prajapati

Reputation: 445

I guess you need some thing like this , i have used jquery as it seems pretty straight forward to use when you usually deal with events 

$(document).ready(function(){
    $(".lewo").mouseenter(function(){
        $(".prawo").hide();
        
    });
    
    $(".lewo").mouseleave(function(){
        $(".prawo").show();
         $(".lewo").show();
    });
    
    $(".prawo").mouseenter(function(){
        
         $(".lewo").hide();
    });
    
    $(".prawo").mouseleave(function(){
        $(".prawo").show();
         $(".lewo").show();
    });
});
.zamieniamlewo {
    display: none;
}

.zamieniamprawo {
    display: none;
}
.lewo:hover ~ .zamieniamprawo {
    display: block !important;
    background:white;
}

.prawo:hover ~ .zamieniamlewo {
    display: block !important;
     background: white;
}
.lewo {
  background: red;
  padding: 20px;
}
.prawo {
  background: green;
  padding: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <div class="lewo">
        <h3>Zawartość lewo</h3>
      </div>


      <div class="prawo">
        <h3>Zawartość prawo</h3>
      </div>

      <div class="zamieniamlewo">

        <h3 class="imie">zamieniamlewo</h3>

      </div>

      <div class="zamieniamprawo">

        <h3>zamieniam prawo</h3>

      </div>

Upvotes: 0

rcodeman
rcodeman

Reputation: 11

The ~ combinator separates two selectors and matches the second element only if it is preceded by the first, and both share a common parent.

for example:

.red ~ p{

  color:red;
}

  <p>i m not red</p>
  <p class='red'>i m not red</p>
  <p>i m red</p>
  <p>i m red</p>

here the last two paragraphs match the sibling selector.

So in your code you can change something like

 <div class="prawo">
    <h3>Zawartość prawo</h3>
  </div>

   <div class="lewo">
    <h3>Zawartość lewo</h3>
  </div>

and add this in .css file

.prawo:hover ~ .lewo {
    display:none;
}

Upvotes: 1

Related Questions