CODEWITHSUNDEEP
htmlcss
Roy Z
Roy Z

Reputation: 117

CSS OnHover- Change another element's property as well as itself

I'm working on a sidebar menu and want it to be partially collapsing, which means I have to show text on hover and hide the text when not hovering. I know another question has been asked about changing another element's property on hover, but I'm having trouble changing itself and another property.

General HTML layout:

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  background-color: #1d326b; 
  height: 100%;
  width: 60px;
  transition: 0.3s;
  border-radius: 0 5px 5px 0;
  font-family: 'Open Sans', sans-serif;
  overflow: hidden;
}

.sidebar:hover > .text {
    display: block; /*Supposed to display text*/
  width: 150px; /*Expands the sidebar*/
}
<div class="sidebar">
   <!--more containers...-->
   <!--text below is deeply nested-->
   <p class="text">Displayed Text</p>
</div>

Is there a pure css solution to this problem? Any help would be appreciated!

Upvotes: 1

Views: 56

Answers (3)

ROOT
ROOT

Reputation: 11622

I think what you are trying to achieve is the animation for the width, if that's what you want just remove > .text from the hover selector:

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  background-color: #1d326b; 
  height: 100%;
  width: 60px;
  transition: 0.3s;
  border-radius: 0 5px 5px 0;
  font-family: 'Open Sans', sans-serif;
  overflow: hidden;
  color: #FFF; 
}

.sidebar:hover {
  display: block; /*Supposed to display text*/
  width: 150px; /*Expands the sidebar*/
}

.text {
  width: 150px;
  display: none;
}

.sidebar:hover .text {
 display: block;
}
<div class="sidebar">
   <!--more containers...-->
   <!--text below is deeply nested-->
   <p class="text">Displayed Text</p>
</div>

Upvotes: 1

Huseyin
Huseyin

Reputation: 96

 .sidebar .text {
   visibility: hidden;
 }
 .text:hover {
    display: block; 
    width: 150px; 
 }

Upvotes: 0

John
John

Reputation: 5335

Would doing something like this be what you're looking for?

.text{
  display: none;
}

.sidebar:hover > .text {
    display: block; /*Supposed to display text*/
    width: 150px; /*Expands the sidebar*/
}

Upvotes: 0

Related Questions