Other div is not changing properties when hovering on a div

Question

The div is not changing properties when I hover on the <input> of that div. It doesn't seem to work.

I want to hover over myclass div inputs and make myclass2 div visible. How to do that ?

.myclass #that:hover+.myclass2 #this {
  left: 100px;
}

<div class="myclass" id="that">
  <input class="logout1" type="button" value="All" id="myBtn"></input>
  <input class="logout2" type="button" value="Section Wise" id="myBtn1"></input>
  <span class="first"></span>
  <span class="second"></span>
</div>
<div class="myclass2" id="this">
  <input class="logout3" type="button" value="Section1" id="myBtn2"></input>
  <input class="logout4" type="button" value="Section2" id="myBtn3"></input>
  <input class="logout5" type="button" value="Section3" id="myBtn4"></input>
  <input class="logout6" type="button" value="Section4" id="myBtn5"></input>
  <span class="third"></span>
  <span class="fourth"></span>
</div>

I think that CSS is always preferable over JavaScript. Well, this is not the case. Use JavaScript and you'll have an easier life — Cristian Traìna, Apr 28 '20 at 08:49

Yasaman.Mansouri · Accepted Answer · 2020-04-28T09:35:41.543

3

.myclass2{
  display:none;
}

.myclass:hover+.myclass2{
  display:block;
}

<div class="myclass" id="that">
  <input class="logout1" type="button" value="All" id="myBtn">
  <input class="logout2" type="button" value="Section Wise" id="myBtn1"></input>
  <span class="first"></span>
  <span class="second"></span>
</div>
<div class="myclass2" id="this">
  <input class="logout3" type="button" value="Section1" id="myBtn2">
  <input class="logout4" type="button" value="Section2" id="myBtn3">
  <input class="logout5" type="button" value="Section3" id="myBtn4"
  <input class="logout6" type="button" value="Section4" id="myBtn5">
  <span class="third"></span>
  <span class="fourth"></span>
</div>

edited Apr 28 '20 at 09:35

answered Apr 28 '20 at 08:55

Yasaman.Mansouri

550
1
3
12

1

You cannot click the buttons though – mplungjan Apr 28 '20 at 08:56
I can click the buttons and from all the answers I see here this one seems to work the best. – Eden Sharvit Apr 28 '20 at 09:04
You are copying his HTML with the same invalid closing `` tag. – Rob Apr 28 '20 at 09:28
Thank you ! This worked fine. I think i messed up the order in the CSS file. Anyways Thank you . – Pulkit Pahuja Apr 28 '20 at 10:10

mplungjan · Answer 2 · 2020-04-28T08:56:33.367

This works - you need position

HOWEVER you cannot click the new buttons - so see second example

#this { position:absolute; width: 300px }

#that:hover + #this {
  right: 100px
}

<div class="myclass" id="that">
  <input class="logout1" type="button" value="All" id="myBtn" />
  <input class="logout2" type="button" value="Section Wise" id="myBtn1" />
  <span class="first">First</span>
  <span class="second">Second</span>
</div>
<div class="myclass2" id="this">
  <input class="logout3" type="button" value="Section1" id="myBtn2" />
  <input class="logout4" type="button" value="Section2" id="myBtn3" />
  <input class="logout5" type="button" value="Section3" id="myBtn4" />
  <input class="logout6" type="button" value="Section4" id="myBtn5" />
  <span class="third">Third</span>
  <span class="fourth">Fourth</span>
</div>

I THINK you mean this:

/* 
$("#myBtn").on("click",function() {
  $("#this").toggle()
})
*/

$("#myBtn").on("mouseenter",function() {
  $("#this").show();
})
$("#myBtn").on("mouseleave",function() {
  setTimeout(function() { $("#this").hide(); },3000);
})

#this { display:none }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="myclass" id="that">
  <input class="logout1" type="button" value="All" id="myBtn" />
  <input class="logout2" type="button" value="Section Wise" id="myBtn1" />
  <span class="first">First</span>
  <span class="second">Second</span>
</div>
<div class="myclass2" id="this">
  <input class="logout3" type="button" value="Section1" id="myBtn2" />
  <input class="logout4" type="button" value="Section2" id="myBtn3" />
  <input class="logout5" type="button" value="Section3" id="myBtn4" />
  <input class="logout6" type="button" value="Section4" id="myBtn5" />
  <span class="third">Third</span>
  <span class="fourth">Fourth</span>
</div>

The `` tag does not use and does not need a closing slash and never has in HTML. — Rob, Apr 28 '20 at 09:30
I very much prefer to write my markup the way the HTML specification is written by the browser vendors and not by the opinion of someone on Stack Overflow. — Rob, Apr 28 '20 at 09:38
I am betting you never use XML on any web page or you aren't properly serving it as XHTML. In any case, the closing slash is pure nonsense in HTML as the specification will tell you if you read it. — Rob, Apr 28 '20 at 09:43

jlegius · Answer 3 · 2020-04-28T09:09:44.867

0

If you just wan't to make your that div visible when you hover this. Then you can use visibile properties, can be managed with css or jquery method.

Css method

#that:hover + #this{
    visibility : visible;
}

#this{
    visibility : hidden;
}

Jquery method

Something like :

$('#this').hide();
$('#that').hover(function(event){
   $('#this').show();
});

edited Apr 28 '20 at 09:09

answered Apr 28 '20 at 09:00

jlegius

18
4

score 0 · Answer 4 · answered Apr 28 '20 at 09:24

I would remove the classes or the ids (or keep them if you need them for something else...) however here is an SCSS that can solve this issue for you:

Here, I removed the classes, but as I mentioned above, you can keep the classes and remove the Ids or keep them both :)

#this {
    display: none;
}

#that {
    &:hover {
        + {
            #this {
                display: block;
            }
        }
    }
}

Other div is not changing properties when hovering on a div

4 Answers4