1

I want to show a div named dot-menu when hover the after content of h1. I have tried the following code but did't work.

h1{
    font-size: 20px;
    font-weight: 400;
    color: #3d3d3d;
    margin-top:50px
}
 h1:after{
    content: "\22EE";
    float: right;
    font-size: 35px;
    padding-right: 20px;
}
.dot-menu{
    float: right;
    background-color: #3d3d3d;
    color: #FFFFFF;
    font-size: 16px;
    padding: 10px;
    font-weight: 400;
    font-family: "Montserrat Light", "Open Sans";
    position: relative;
    top:-10px;
    opacity:0;
}
h1:after:hover .dot-menu{
    opacity:1;
}
<h1>Henry Little</h1><h3 class="dot-menu">about</h3>
Abhishek Pandey
  • 13,302
  • 8
  • 38
  • 68
JIBIN BJ
  • 105
  • 15
  • check this....http://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-a-div-is-hovered – pgcan Dec 30 '16 at 05:30
  • Check this.. http://stackoverflow.com/questions/5777210/how-to-write-hover-condition-for-abefore-and-aafter – Bhavin Shah Dec 30 '16 at 05:32
  • Seems you have wrong idea about hover. You can change style of the child element on hover to the parent. – aavrug Dec 30 '16 at 05:32
  • you ll have to write javascript/jQuery to change the style of parent while hover on child element. – Bhavin Shah Dec 30 '16 at 05:33

2 Answers2

2

Your selector h1:after:hover .dot-menu is wrong.

This selector will look for .dot-menu element that is descendant of h1 but this is not the case. And 2nd you can't select another element on hover of a pseudo element.

You will need to change your code a bit. Consider the following HTML:

<h1>Henry Little
  <span class="icon">&vellip;</span>
  <span class="dot-menu">about</span>
</h1>

Make menu opener and menu both child elements of same parent. Then you can show menu on hover of icon with Sibling (+ ) selector.

h1 .icon:hover + .dot-menu{
  opacity:1;
}


h1{
  font-size: 20px;
  font-weight: 400;
  color: #3d3d3d;
  margin-top:50px;
  position: relative;
}

h1:after {
  display: block;
  clear: both;
  content: '';
}
h1 .icon {
  float: right;
  font-size: 35px;
  padding-right: 20px;
  position: relative;
  cursor: pointer;
}
.dot-menu {
  float: right;
  background-color: #3d3d3d;
  color: #FFFFFF;
  font-size: 16px;
  padding: 10px;
  font-weight: 400;
  font-family: "Montserrat Light", "Open Sans";
  position: relative;
  top:30px;
  opacity:0;
  right: 0;
}
h1 .icon:hover + .dot-menu{
  opacity:1;
}
<h1>Henry Little
  <span class="icon">&vellip;</span>
  <div class="dot-menu">about</div>
</h1>
Mohammad Usman
  • 37,952
  • 20
  • 92
  • 95
  • This seems like the desired effect, but having a `
    ` inside `

    ` is invalid markup. Please correct accordingly.

     – Siavas Dec 30 '16 at 05:49
  • @JIBINBJ you are welcome. Please mark any answer as accepted that solved your problem. This might help others looking for solution of similar issues. – Mohammad Usman Dec 30 '16 at 09:29
1

See this just after making the .dot-menu a child of h1 it is working.

h1{
    font-size: 20px;
    font-weight: 400;
    color: #3d3d3d;
    margin-top:50px
}
 h1:after{
    content: "\22EE";
    float: right;
    font-size: 35px;
    padding-right: 20px;
}
.dot-menu{
    float: right;
    background-color: #3d3d3d;
    color: #FFFFFF;
    font-size: 16px;
    padding: 10px;
    font-weight: 400;
    font-family: "Montserrat Light", "Open Sans";
    position: relative;
    top:-10px;
    opacity:0;
}
h1:hover .dot-menu{
    opacity:1;
}
<h1>Henry Little<span class="dot-menu">about</span></h1>
aavrug
  • 1,849
  • 1
  • 12
  • 20