Hover effect on child element with CSS

Question

Hover effect on child element with CSS

Navigation

#1 by (2 votes)
#2 by (1 votes)

2

I have the following code, which is the menu of my application:

    <div class="mainmenu-area" data-spy="affix" data-offset-top="100">
        <div class="container">
            <!--Logo-->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#primary-menu">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="#" class="navbar-brand">
                    <img class="logo" src="">
                </a>
            </div>
            <!--Logo/-->
            <nav class="collapse navbar-collapse" id="primary-menu">
                <ul class="nav navbar-nav navbar-right">
                    <li class="active"><a href="#home-page">Início</a></li>
                    <li><a href="#service-page">Facilidades</a></li>
                    <li><a href="#feature-page">Recursos</a></li>
                    <li><a href="#price-page">Planos</a></li>
                    <!-- Isto poderá ser utilizado mais adiante <li><a href="#team-page">Team</a></li> -->
                    <li><a href="#faq-page">FAQ</a></li>
                    <li><a href="{{route('login')}}" class="login"><span class="un">Área Restrita </span><span class="ti-lock"></span></a></li>
                </ul>
            </nav>
        </div>
    </div>

I have a <span> in the last element <li> to which I applied the following CSS:

.un {
  display: inline-block;
}

.un:after {
  content: '';
  width: 0px;
  height: 1px;
  display: block;
  background: #ffffff;
  transition: 400ms;
}

.un:hover:after {
  width: 100%;
}

My question is: is there any way I can have this style of the un class fired when I hover on the parent element just by using CSS?

The way I did it works when I hover over <a> , however for layout reasons I would like the effect to be triggered when I hover over the parent element.

Below is the result that I have at the moment:

html css3

asked by anonymous 04.12.2018 / 19:10

2 answers

2

Yes, my friend, you only have to "activate" the effect when you pass in <a> with class .login

.login:hover.un:after{width:100%;}

Seethecode.DisplayfullscreenasitiswithBootstrapwillnotappearonnarrowscreens

.un {
	display: inline-block;
}

.un:after {
	content: '';
	width: 0px;
	height: 1px;
	display: block;
	background: #ff0000;
	transition: 400ms;
}

.login:hover .un:after {
	width: 100%;
}

<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

<div class="mainmenu-area" data-spy="affix" data-offset-top="100">
<div class="container">
	<!--Logo-->
	<div class="navbar-header">
		<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#primary-menu">
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
		</button>
		<a href="#" class="navbar-brand">
			<img class="logo" src="">
		</a>
	</div>
	<!--Logo/-->
	<nav class="collapse navbar-collapse" id="primary-menu">
		<ul class="nav navbar-nav navbar-right">
			<li class="active"><a href="#home-page">Início</a></li>
			<li><a href="#service-page">Facilidades</a></li>
			<li><a href="#feature-page">Recursos</a></li>
			<li><a href="#price-page">Planos</a></li>
			<!-- Isto poderá ser utilizado mais adiante <li><a href="#team-page">Team</a></li> -->
			<li><a href="#faq-page">FAQ</a></li>
			<li><a href="{{route('login')}}" class="login"><span class="un">Área Restrita </span><span class="ti-lock"></span></a></li>
		</ul>
	</nav>
</div>

04.12.2018 / 19:21

Are there any problems with using special characters in Python codes? Select and display character in more than one div

score 1 · Accepted Answer

You can put the .un class in <li> and use :after in <a> without having to use <span class="un"> around the link. One less node in DOM and leaner code. : D

Your li instead of looking like this:

<li>
   <a href="{{route('login')}}" class="login">
      <span class="un">Área Restrita</span>
      <span class="ti-lock"></span>
   </a>
</li>

It will look like this:

<li class="un">
   <a href="{{route('login')}}" class="login">
      Área Restrita
      <span class="ti-lock"></span>
   </a>
</li>

body{
   background-color: black !important;
}

li{
  background-color: red;
}

.login{
   display: inline-block;
}

.un a:after {
  content: '';
  width: 0px;
  height: 1px;
  display: block;
  background: #ffffff;
  transition: 400ms;
}

.un:hover a:after {
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<div class="mainmenu-area" data-spy="affix" data-offset-top="100">
        <div class="container">
            <!--Logo-->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#primary-menu">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="#" class="navbar-brand">
                    <img class="logo" src="">
                </a>
            </div>
            <!--Logo/-->
            <nav class="collapse navbar-collapse" id="primary-menu">
                <ul class="nav navbar-nav navbar-right">
                    <li class="active"><a href="#home-page">Início</a></li>
                    <li><a href="#service-page">Facilidades</a></li>
                    <li><a href="#feature-page">Recursos</a></li>
                    <li><a href="#price-page">Planos</a></li>
                    <!-- Isto poderá ser utilizado mais adiante <li><a href="#team-page">Team</a></li> -->
                    <li><a href="#faq-page">FAQ</a></li>
                    <li class="un"><a href="{{route('login')}}" class="login">Área Restrita </span><span class="ti-lock"></a></li>
                </ul>
            </nav>
        </div>
    </div>