Hover on text to display ul element

css text hover effects
css class hover
li:hover css background-color
bootstrap hover
button hover css
ul hover
css hover text
css highlight text on hover

I'm trying to achieve similar effect as listed here - https://www.harrythehirer.com.au/

This is what I have so far, but as you can see it's not complete.

Even though I've set opacity of li child to 0, when you hover in the blank area it activates the hover.

div.section-44 {
  text-align: center;
}
div.section-44 span {
  display: inline-block;
  vertical-align: middle;
}
div.section-44 ul {
  padding-left: 0px;
}
div.section-44 ul li {
  list-style-type: none;
  background: red;
  padding: 20px 40px;
  color: #fff;
  border-radius: 50px;
}
div.section-44 ul li:nth-child(1), div.section-44 ul li:nth-child(2), div.section-44 ul li:nth-child(4), div.section-44 ul li:nth-child(5) {
  opacity: 0;
}
div.section-44 ul:hover li {
  opacity: 1;
}
<div class="section-44">
<h2>
<span>I want </span>
<span>
  <ul>
  <li><a href="#">to do A</a></li>
  <li><a href="#">to do B</a></li>
  <li><a href="#">to do C</a></li>
  <li><a href="#">to do D</a></li>
  <li><a href="#">s</a></li>
  </ul>
</span>
</h2>
</div>

You could do this with position absolute and some transforms. The key is to have a separate list and show/hide it when you hover on a desired text.

It should look something like the code below:

div.section-44 {
  text-align: center;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
div.section-44 .items {
  display: inline-block;
  position: relative;
}
div.section-44 .items span {
  padding: 20px 40px;
  color: #fff;
  background: black;
  border-radius: 50px;
}
div.section-44 .items:hover ul {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}
div.section-44 ul {
  padding-left: 0px;
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%) scale(0);
  width: 100%;
  opacity: 0;
  transition: 0.3s ease-out;
  background: green;
  border-radius: 50px;
  padding: 20px;
}
div.section-44 ul li {
  list-style-type: none;
  background: red;
  border-radius: 50px;
  color: #fff;
  padding: 20px 40px;
}
div.section-44 ul:hover ul {
  opacity: 1;
  visibility: visible;
}
<div class="section-44">
  <h2>
    <span>I want </span>
    <div class="items">
      <span>to do A</span>
      <ul>
        <li><a href="#">to do A</a></li>
        <li><a href="#">to do B</a></li>
        <li><a href="#">to do C</a></li>
        <li><a href="#">to do D</a></li>
        <li><a href="#">s</a></li>
      </ul>
    </div>
  </h2>
</div>

When hover over text it highlights "ul & li problem", When hover over text it highlights "ul & li problem" ul li span { display:block; padding:10px; /* position:absolute; top:0; left:0; right:0; bottom:0;  The :hover selector is used to select elements when you mouse over them. Tip: The :hover selector can be used on all elements, not only on links. Tip: Use the :link selector to style links to unvisited pages, the :visited selector to style links to visited pages, and the :active selector to style the active link.

You are setting opacity to 0 and 1. Instead set set display to none and block and it will work. Reason opacity just controls the transparency but it will be present and take the space which is not the case with display set to none.

Look at the below post for detailed explanation

Does opacity:0 have exactly the same effect as visibility:hidden

div.section-44 {
  text-align: center;
}

div.section-44 span {
  display: inline-block;
  vertical-align: middle;
}

div.section-44 ul {
  padding-left: 0px;
}

div.section-44 ul li {
  list-style-type: none;
  background: red;
  padding: 20px 40px;
  color: #fff;
  border-radius: 50px;
}

div.section-44 ul li:nth-child(1),
div.section-44 ul li:nth-child(2),
div.section-44 ul li:nth-child(4),
div.section-44 ul li:nth-child(5) {
  display: none;
}

div.section-44 ul:hover li {
  display: block;
}
<div class="section-44">
  <h2>
    <span>I want </span>
    <span>
  <ul>
  <li><a href="#">to do A</a></li>
  <li><a href="#">to do B</a></li>
  <li><a href="#">to do C</a></li>
  <li><a href="#">to do D</a></li>
  <li><a href="#">s</a></li>
  </ul>
</span>
  </h2>
</div>

CSS :hover Selector, The :hover selector is used to select elements when you mouse over them. ul li:​hover {background: #555;} ul li:hover ul {display: block;} ul li ul { position:  The :hover CSS pseudo-class matches when the user interacts with an element with a pointing device, but does not necessarily activate it. It is generally triggered when the user hovers over an element with the cursor (mouse pointer).

div.section-44 {
text-align:center;
  & span {
    display:inline-block;
        vertical-align:middle;

  }
  & ul {
    padding-left:0px;



    & li {
      list-style-type:none;
      background:red;
      padding:20px 40px;
      color:#fff;
      border-radius:50px;
      &:nth-child(1), &:nth-child(2),&:nth-child(4), &:nth-child(5) {
        opacity:0;
      }
    }
     &:hover {
      background : red;
      border-radius: 25px;

        & li {
          opacity:1;
        }
      }
  }
}

You Don't Need JavaScript for That!, We can use pseudo-elements to pull in text and display it on :hover . Dropdown menu --> <li class="nav-item nav-item-dropdown"> <a  CSS Hover Selector. This selector is used to define how elements are styled when they are hovered on. The selector called :link is for links that are unvisited, selector :visited is used for visited pages, selector called :active is used for the link that is currently active.

Working with CSS Hover Effects, The : hover selector is used to select the elements contained in the website when we a.model5:link {text-decoration: none;} a.model5:hover, ul li:hover {​background: Grey;} ul li:hover ul {display: block;} ul li ul { position:  Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML.

Show Hide Dropdown Menu on Mouse Hover Using CSS, ul li a{; display: block;; padding: 8px 25px;; color: #333;; text-decoration: none;; }; ul li a:hover{; color: #fff;; background: #939393;; }; ul li ul.dropdown{; min-width:  Let me explain the CSS we added above. The .dropdown:hover selector is triggered when the user’s mouse moves over top of .dropdown. Once this happens, the style display: block; is applied to the last item in the selector .dropdown-menu. So, the parent element is triggering the style and the dropdown menu is what the style is being applied to.

Targeting Menu Elements with Submenus in a Navigation Bar, nav { display: block; text-align: center; } nav ul { margin: 0; padding:0; -5px } .​nav li li:hover > a:first-child:nth-last-child(2):before { border: 5px solid transparent;​  If i hover on any li element the div contains another list of items,if mouseleave that element then that li element should not hidden. If i hover another li element then first li element div should be hidden and second li element should be show. for example you can see www.cloudingsystem.com

Comments
  • @SunilPatel if this answer worked for you, please rate it as accepted. Thank you !
  • I thought of adding display:none but as you can see page bounces a lot because of that. Any way to make it as smooth as the site I listed?
  • @SunilPatel inspect the code on that web site :) You will get a better idea how they have structured the elements, and you can see that they're adding a couple of classes with Javascript
  • please change the scss to above in jsfiddle. it works like a charm.
  • If you hover on li:nth-child(1) or any other with opacity 0 it activates the hover too. I don't want hover to activate unless you hover on the third child. hope I made sense.