Some time ago :hover in css went fine,but I did some changes(I forgot) and now it is not working
.nav-bar {
width: 30px;
height: 20px;
display: inline-block;
position: absolute;
right: 5px;
top: 0;
bottom: 0;
margin: auto;
cursor: pointer;
}
.nav-bar:hover {
color: #B0BEC5;
}
.nav-bar span {
width: 30px;
height: 3px;
background: white;
display: block;
margin-bottom: 5px;
position: absolute;
transition: 0.25s ease-in-out;
border-radius: 3px;
}
<div class="nav-bar">
<span></span>
<span></span>
<span></span>
</div>
I think you want to change the bar's background color on hover
replace this:
.nav-bar:hover {
color: #B0BEC5;
}
with this:
.nav-bar:hover span{
background: #B0BEC5;
}
Only 2 slight errors in your code, change:
.nav-bar:hover {
color: #B0BEC5;
}
To
.nav-bar:hover > span {
background-color: #B0BEC5;
}
Then it should work perfectly.
You need to nest the hover within the nav-bar but on the span:
.nav-bar {
}
.nav-bar span {
background: white;
color: red;
padding: 2px 8px;
margin: 2px;
transition: 0.25s ease-in-out;
border-radius: 3px;
display: inline-block;
}
.nav-bar span:hover{
background: red;
color: white;
}
<div class="nav-bar">
<span>NavA</span>
<span>NavB</span>
<span>NavC</span>
</div>
Your code is perfect. Just change hover effect.
.nav-bar:hover {
background: #B0BEC5;
}
You add css color : #B0BEC5 which change color of text, where as there is no text.
Related
I've found plenty of answers to this question, but none of them have worked for my case. I can't help but feel I'm missing something basic.
HTML
<nav>
<a to="#"><i class="fas fa-home">TEST</i> Home</a>
<a to="#">About</a>
<a to="#">Something else</a>
<div class="animation start-home"></div>
</nav>
CSS
nav {
display: flex;
margin: auto;
/* margin-top: 30px; */
padding: 12px 0;
position: relative;
max-width: 800px;
height: 50px;
background-color: purple;
border-radius: 0;
}
nav a {
height: 100%;
font-size: 15px;
display: inline-block;
position: relative;
z-index: 1;
text-decoration: none;
text-transform: uppercase;
text-align: center;
color: white;
cursor: pointer;
}
nav .animation {
position: absolute;
height: 100%;
top: 0;
z-index: 0;
transition: all 0.5s ease 0s;
}
nav i {
/* position: absolute; */
height: 100%;
top: 0;
z-index: 0;
transition: all 0.5s ease 0s;
color: black;
}
a:nth-child(1) {
width: 100px;
}
a:nth-child(2) {
width: 150px;
}
a:nth-child(3) {
width: 150px;
}
/* somehow invert this color when the nav a element is hovered */
.fa-home {
color: green;
}
.fa-home:hover {
color: white;
}
/* I expected this to work, but it doesn't */
nav a:nth-child(1):hover ~ .fa-home {
background-color: white;
}
nav a:nth-child(1):hover ~ .animation {
width: 100px;
left: 0;
background-color: green;
}
nav a:nth-child(2):hover ~ .animation {
width: 150px;
left: 100px;
background-color: #d3b814;
}
nav a:nth-child(3):hover ~ .animation {
width: 150px;
left: 250px;
background: rgb(249, 11, 70);
}
What I want is for the green TEST text, left of Home, to change colour when hovering the link.
I've used the ~ modifier to move the background colour around - but I can't get it to work with the I tag (which is a font-awesome icon, but couldn't get codepen to import it properly).
I'm currently able to turn it white while hovering the I tag, but not the link itself.
Finally, here's the original navbar code for those interested.
The selector is wrong
Change
nav a:nth-child(1):hover ~ .fa-home {
background-color: white;
}
To this:
nav a:nth-child(1):hover > .fa-home {
color: white;
}
Im new to css and html and im trying to make a good looking website for my FiveM RP Server, and im having issues with the buttons
a:visited {
color: white;
text-decoration: none;
}
a:link {
color: white;
text-decoration: none;
}
a:after {
border-bottom: solid 3px #019fb6;
transform: scaleX(0);
transition: transform 250ms ease-in-out;
}
a:hover {
color: green;
border-bottom: 3px solid #004F10;
transform: scaleX'(1);
}
a:active {
color: darkgreen;
}
<header>
<ul>
<h2>Home</h2>
<h2>Rules</h2>
<h2>Discord</h2>
</ul>
</header>
I have displayed the "a" tag as an inline-block so that it doesn't occupy the whole container width.
In your code, you forgot to add content property. And the hover is applied to the ::after selector of the "a" tag not the "a" tag itself. Here is the fix to your code.
a{
display: inline-block;
color: white;
text-decoration: none;
}
a::after {
display: block;
content: '';
border-bottom: solid 3px darkgreen;
transform: scaleX(0);
transition: transform 250ms ease-in-out;
}
a:hover::after{
transform: scaleX(1);
}
a:active{
color: darkgreen;
}
a:visited{
color: white;
text-decoration: none;
}
Check this CodePen from Peter, he did exactly what you want.
Code:
<nav>
<div id="wrapper">
<ul>
<li>item1</li>
<li>item2</li>
<li class="different">item3</li>
<li class="different">item4</li>
</ul>
</div>
</nav>
CSS:
body, html{
width:100%;
height:100%;
background-color: #999999;
}
*{
box-sizing:border-box;
margin:0;
padding:0;
list-style:none;
font-family: Helvetica;
}
nav{
width: 100%;
height: 50px;
position: fixed;
top: 0;
left:0;
background-color: #333333;
}
#wrapper{
width: 100%;
height: 100%;
overflow: hidden;
display: block;
float: left;
}
#wrapper ul{
diplay: block;
width: 50%;
margin: 0 auto;
height: 100%;
text-align: center;
}
#wrapper li{
display: block;
float: left;
text-align: center;
width: 25%;
height: 100%;
transition: all ease-in-out .2s;
}
#wrapper a{
display: block;
float: left;
color: white;
width: 100%;
padding: 0 .5em;
line-height: 50px;
text-decoration: none;
font-weight: bold;
}
li.different{
border:none;
position: relative;
}
li.different:hover{
border: none;
}
li:hover {
border-bottom: 5px solid #FFFFFF;
}
.different::after{
content: '';
position: absolute;
width: 0px;
height: 5px;
left: 50%;
bottom:0;
background-color: white;
transition: all ease-in-out .2s;
}
.different:hover::after{
width: 100%;
left: 0;
}
CodePen
There are total 3 animation.
1st with default top-down animation.
2nd with fade animation
3rd with fade and scale animation.
.main-container{
display: flex;
}
/* First tag */
.testAni {
font-size: 50px;
display: inline-block;
position: relative;
color: darkgreen;
text-decoration: none;
margin-right: 20px;
}
.testAni:after {
content: '';
position: absolute;
border-bottom: 5px solid darkgreen;
width: 100%;
left: 0;
top: 30px;
transition: 0.5s all ease;
}
.testAni:hover:after {
top: 100%;
}
/* Second tag */
.testAni2:after {
content: '';
position: absolute;
border-bottom: 5px solid darkgreen;
width: 100%;
left: 0;
top: 30px;
transition: 0.5s all ease;
opacity: 0;
}
.testAni2:hover:after {
top: 100%;
opacity: 1;
}
/* Third tag */
.testAni3:after {
content: '';
position: absolute;
border-bottom: 5px solid darkgreen;
transform: scale(0.1);
left: 0;
top: 30px;
transition: 0.5s all ease;
opacity: 0;
}
.testAni3:hover:after {
top: 100%;
transform: scale(1);
opacity: 1;
}
<div class="main-container">
<h2><a class="testAni" href="index.html">Home</a></h2>
<h2><a class="testAni testAni2" href="index.html">Home</a></h2>
<h2><a class="testAni testAni2 testAni3" href="index.html">Home</a></h2>
</div>
When I hover to one of the elements, that elements itself expands, and other will adjust when the font-size gets bigger. How to stop that?
Same is happening to the red background, so I set a height: 38px; to avoid expanding:
header {
position: relative;
top: 10px;
margin: 0 auto;
height: 38px;
width: 100%;
background: red;
}
Now I tried to set a height and width to a single <li> to see if it won't move/expand at all, but doesn't work:
<li style="width: 130px; height: 38px;">Home</li>
* {
margin: 0;
padding: 0;
}
body {
background: royalblue;
font-family: monospace;
}
header {
position: relative;
top: 10px;
margin: 0 auto;
height: 38px;
width: 100%;
background: red;
}
.parent-ul {
position: relative;
top: 0px;
list-style: none;
text-align: center;
padding: 11px 0;
}
.parent-ul li {
margin: -4px;
display: inline;
padding: 7px 13px;
border-left: 1px solid silver;
transition: background 1s, border 1s,
border-radius 1s;
}
#prod {
border-right: 1px solid silver;
padding-right: 15px;
}
.parent-ul a {
text-decoration: none;
color: white;
padding: 0px 50px;
font-size: 14px;
transition: color 1s, font-size .5s;
}
/* Effects ================================ */
li:hover {
background: black;
border: 0;
border-radius: 2px;
}
li:hover + li {
border: 0;
}
li:hover a {
color: gold;
font-size: 18px;
}
#prod:hover {
border: 0;
}
<body>
<header>
<ul class="parent-ul">
<li style="width: 130px; height: 38px;">Home</li>
<li>About</li>
<li>Contact</li>
<li>Services</li>
<li id="prod">Products</li>
</ul>
</header>
</body>
Yoy can use float: left and box-sizing: border-box to align the nav items. Also, use padding : 0 so that when you make the text big, it is centered. Here is an example:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: royalblue;
font-family: monospace;
}
header {
position: relative;
margin: 0 auto;
height: 38px;
width: 100%;
background: red;
}
.parent-ul {
position: relative;
list-style: none;
text-align: center;
}
.parent-ul li {
height: 38px;
width: 20%;
float: left;
transition: background 1s, border 1s,
border-radius 1s;
}
.parent-ul li:not(:first-child) {
border-left: 1px solid silver;
}
.parent-ul a {
text-decoration: none;
color: white;
padding: 0;
font-size: 14px;
transition: color 1s, font-size .5s;
line-height: 38px;
}
/* Effects ================================ */
li:hover {
background: black;
border: 0;
border-radius: 2px;
cursor: pointer;
}
li:hover a {
color: gold;
font-size: 18px;
}
<body>
<header>
<ul class="parent-ul">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Services</li>
<li>Products</li>
</ul>
</header>
</body>
You need to set its display property so that it accepts height and width of the element.
Try this
<li style="display:inline-block;width: 130px; height: 38px;">Home</li>
I give it a try with a different approach. Instead of changing the fontsize, you could scale the text (which is wrapped with <span></span> tag). Take a look at this https://jsbin.com/fekihusasi/edit?html,css,output.
You can use, Transform: scale(1.3 , 1.3); for the text when you hover on it.
take a look at this: https://plnkr.co/edit/JG3Y1PmLJK2hiL8JNGSy
CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: royalblue;
font-family: monospace;
}
header {
position: relative;
margin: 0 auto;
height: 38px;
width: 100%;
background: red;
}
.parent-ul {
list-style: none;
text-align: center;
}
.parent-ul li {
width: 18%;
display: inline-block;
transition: background 1s, border 1s, border-radius 1s;
}
.parent-ul a {
text-decoration: none;
color: white;
padding: 0;
font-size: 14px;
transition: all .3s linear;
line-height: 38px;
}
/* Effects ================================ */
li:hover {
background: black;
border: 0;
border-radius: 2px;
cursor: pointer;
transition: all .3s linear;
}
li:hover a {
color: gold;
display: block;
transition: all .3s linear;
transform: scale(1.3, 1.3);
-ms-transform: scale(1.3, 1.3);
-webkit-transform: scale(1.3, 1.3);
}
All right? I'm having problems with an effect on CSS. Everything works perfectly until I put the code inside another div, and has a background that is not transparent. Look at the example below:
body {
background: #2ecc71;
padding:0;
margin:0;
}
#bg{
background: #000;
}
.container-button {
padding: 10em;
margin: 0 auto;
width: 1170px;
text-align: center;
display: block;
overflow: hidden;
}
/* GENERAL BUTTON STYLING */
.btn-more-info{
display:block;
overflow: hidden;
text-align: center;
display: inline-block;
float: left;
}
.btn-more-info a,
.btn-more-info a::after {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
test-ident: -9999px;
text-decoration: none;
}
.btn-more-info a {
background: none;
border: 2px solid #fff;
border-radius: 5px;
color: #fff;
display: block;
font-size: 14px;
font-weight: bold;
padding: 20px 50px;
position: relative;
text-transform: uppercase;
}
.btn-more-info a::before,
.btn-more-info a::after {
background: #fff;
content: '';
position: absolute;
z-index: -1;
}
.btn-more-info a:hover {
color: #2ecc71;
}
/* BUTTON EFFECT */
.btn-effect {
overflow: hidden;
}
.btn-effect::after {
/*background-color: #f00;*/
height: 100%;
left: -35%;
top: 0;
transform: skew(50deg);
transition-duration: 0.6s;
transform-origin: top left;
width: 0;
}
.btn-effect:hover:after {
height: 100%;
width: 135%;
}
.btn-send{
overflow: hidden;
text-align: center;
clear: both;
}
.btn-send a,
.btn-send a::after {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
test-ident: -9999px;
text-decoration: none;
}
.btn-send a {
background: none;
border: 2px solid #353B4C;
border-radius: 5px;
color: #353B4C;
display: inline-block;
font-size: 14px;
font-weight: bold;
padding: 20px 50px;
position: relative;
text-transform: uppercase;
}
.btn-send a::before,
.btn-send a::after {
background: #353B4C;
content: '';
position: absolute;
z-index: -1;
}
.btn-send a:hover {
color: #FFF;
}
<div id="bg">
<div class="container-button">
<div class="btn-more-info">
Continue lendo
</div>
<div class="btn-send">
Enviar mensagem
</div>
</div>
</div>
You see, if you remove the id="bg" effect functions normally.
Can anyone help me?
Thank U!
The problem is on the z-index of the :before and :after.
Try this:
.btn-more-info a::before,
.btn-more-info a::after {
background: #fff;
content: '';
position: absolute;
z-index: 0;
}
Also increase the z-index on the text inside the button.
Ok so I have 3 css circles with icon fonts centered inside of them, now I cant for the life of me get it centered inside of its parent. Also instead of lining up they are stacking on top of each other, I used float: left to fix this but it messed up my whole hover.
Take a look here, just go to portfolio section and hover over one of the members.
How it is suppose to look:
How it looks:
HTML:
<ul class="img-list">
<li>
<img src="img/team-member-1.jpg" alt="...">
<span class="text-content">
<span>
<div class="social-icon-holder">
<span class="ion-social-twitter social-icon"></span>
</div>
<div class="social-icon-holder">
<span class="ion-social-facebook social-icon"></span>
</div>
<div class="social-icon-holder">
<span class="ion-social-dribbble social-icon"></span>
</div>
Johnathan Adams
<p>Developer</p>
</span>
</span>
</li>
</ul>
CSS:
/* =Team
-------------------------------------------------------------- */
.team {
padding: 180px 0 180px 0;
}
.team img {
width: 100%;
height: 100%;
}
ul.img-list {
list-style-type: none;
padding: 0;
}
ul.img-list li {
display: inline-block;
position: relative;
height: 350px;
}
span.text-content {
background: rgba(39,39,39,0.75);
color: white;
cursor: pointer;
display: table;
left: 0;
position: absolute;
top: 0;
opacity: 0;
width: 100%;
height: 100%;
}
span.text-content span {
display: table-cell;
text-align: center;
vertical-align: middle;
}
ul.img-list li:hover span.text-content {
opacity: 1;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
.team span p {
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
font-size: 14px;
color: #a5a5a5;
}
.social-icon {
font-size: 12px;
color: #fff;
margin: 0 auto;
display: table-cell;
vertical-align: middle;
}
.social-icon-holder {
border: 2px solid #fff;
border-radius: 50%;
width: 30px;
height: 30px;
display: table;
}
.social-icon-holder:hover {
background-color: #fff;
cursor: pointer;
}
.social-icon-holder:hover .social-icon {
color: #272727;
cursor: pointer;
-webkit-transition: color 0.5s ease;
}
Wrap a <p> tag around the team members name to make it a block element and essentially put it on a new line.
Then, in .social-icon-holder{
change
display:table;
to
display:inline-block;
or
display:inline-table;
JsFiddle
For this JsFiddle, I jut used a placeholder background image.
To get the social icons center, I did this:
.social-icon {
font-size: 12px;
color: #fff;
display: block;
text-align:center;
width:30px;
height:30px;
}
JsFiddle
you have to remove display :table from the class .social-icon-holder and then you may add display: table-cell; property.
also to align the icons inside the circle you can add font-size and a little bit padding.
HEre I've just added for facebook icon, but you can apply it on .social-icon so apply for all icons.
.ion-social-facebook:before {
content: "\f231";
font-size: 2em; /*Added line this will increase the icon size*/
padding-left: .4em;
}
from my comment: http://jsfiddle.net/h7kJS/ full result : http://jsfiddle.net/h7kJS/2/embedded/result/
.social-icon-holder can be displayed as inline-table (inline-block+line-height works too).
Image should be in absolute under .text-content to make things easier :below: update of your CSS (where .team was removed for .img-list )
/* =Team
-------------------------------------------------------------- */
.img-list {/* update */
padding: 180px 0 180px 0;
}
.img-list img {/* update */
width: 100%;
height: 100%;
position:absolute;/* update */
z-index:0;/* update */
}
ul.img-list {
list-style-type: none;
padding: 0;
}
ul.img-list li {
display: inline-block;
position: relative;
height: 350px;
width:350px;/* update */
}
span.text-content {
background: rgba(39,39,39,0.75);
color: white;
cursor: pointer;
display: table;
left: 0;
top: 0;
opacity: 0;
width: 100%;
height: 100%;
}
span.text-content span {
display: table-cell;
text-align: center;
vertical-align: middle;
height:100%;
width:100%;
}
ul.img-list li:hover span.text-content {
opacity: 1;
transition: opacity 500ms;
position:relative;/* update */
}
.team span p {
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
font-size: 14px;
color: #a5a5a5;
}
.social-icon {
font-size: 12px;
color: #fff;
margin: 0 auto;
display: table-cell;
vertical-align: middle;
}
.social-icon-holder {
border: 2px solid #fff;
border-radius: 50%;
width: 30px;
height: 30px;
display: inline-table;/* update */
}
.social-icon-holder:hover {
background-color: #fff;
cursor: pointer;
}
.social-icon-holder:hover .social-icon {
color: #272727;
cursor: pointer;
transition: color 0.5s ease;
}
Is it ok ? try this code
.social-icon-holder {
border: 2px solid #FFFFFF;
border-radius: 50%;
height: 30px;
width: 30px;
display: block;
margin: 0 auto;
}
Try doing this:
<span>
<div class="social">
<div class="social-icon-holder">
<span class="ion-social-twitter social-icon"></span>
</div>
<div class="social-icon-holder">
<span class="ion-social-twitter social-icon"></span>
</div>
<div class="social-icon-holder">
<span class="ion-social-twitter social-icon"></span>
</div>
</div>
</span>
--- stylesheet --
.social div{
display: inline-block;
}
.social-icon{
padding: 8px 10px;
}