What should I do when I have 2 a:hover values right above each other, but only the first value is working and the second one not working?
<div>
Home
</div>
<div>
Features
</div>
<div>
Pricing
</div>
<div>
Contact
</div>
<div>
<a class="button-go-premium" href="#">Go Premium</a>
</div>
.button-go-premium {
border: 3px solid var(--primary-color);
border-radius: 15px;
margin-top: -3px;
padding-right: 0px;
}
.navbar a:hover {
color: var(--primary-color);
}
.button-go-premium:hover {
background-color: var(--primary-color);
color: white;
}
I have tried to delete the first value (--primary color), only then the second value (white) is working, but I need to have both values working at the same time. If possible, I do not want to change the order of divs or any of the syntax.
As easy and not best practice solution you can use
color: white !important
But it's better to add classes for the regular links and for specific links.
.button-go-premium {
border: 3px solid red;
border-radius: 15px;
margin-top: -3px;
padding-right: 0px;
}
.navbar .link:hover {
color: red;
}
.link.button-go-premium:hover {
background-color: red;
color: white;
}
<div class="navbar">
<div>
<a class="link" href="#">Home</a>
</div>
<div>
<a class="link" href="#">Features</a>
</div>
<div>
<a class="link" href="#">Pricing</a>
</div>
<div>
<a class="link" href="#">Contact</a>
</div>
<div>
<a class="link button-go-premium" href="#">Go Premium</a>
</div>
</div>
Since you don't want to change your HTML syntax, you can target the element with more specificity.
Instead of
.button-go-premium:hover {
background-color: var(--primary-color);
color: white;
}
Target it with
.navbar a.button-go-premium:hover {
background-color: var(--primary-color);
color: white;
}
See the difference? you were previously using this against yourself. You could use more classes like the other answer mentioned, but that can get bulky. You could not touch your HTML and change your CSS to
.navbar a:hover {
color: var(--primary-color);
}
.button-go-premium {
border: 3px solid var(--primary-color);
border-radius: 15px;
margin-top: -3px;
padding-right: 0px;
}
.navbar a.button-go-premium:hover {
background-color: var(--primary-color);
color: white;
}
SCSS Version
.navbar {
// navbar styles
a {
// styles for links
&:hover {
color: var(--primary-color);
}
}
a.button-go-premium {
border: 3px solid var(--primary-color);
border-radius: 15px;
margin-top: -3px;
padding-right: 0px;
&:hover {
background-color: var(--primary-color);
color: white;
}
}
}
Anyone reading this should look into the following concepts in CSS
https://developer.mozilla.org/en-US/docs/Web/CSS/specificity
https://developer.mozilla.org/en-US/docs/Web/CSS/inheritance
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors
Try to use
color: white !important;
Related
I'm trying to set a :hover for a link inside a class. At first I tried
.link{
color: #e62739;
}
I saw past discusssion and try the solution proposed
.opener a.link:hover {
color: #e62739;
}
but it didn't work. Im'not sure to know where is my mistake.
.link{text-decoration:none; color:white;}
.opener a.link:hover {
color: #e62739;
}
.row {
display: flex; /* equal height of the children */
}
.col {
flex: 1; /* additionally, equal width */
padding: 1em;
border: solid;
}
div {font-family:'Varela Round';
}
.opener {
background-color: #07183d;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border: 1px white solid;
}
.benefits {
background-color: #07183d;
border: none;
color: white;
padding: 15px 32px;
text-decoration: none;
display: inline-block;
font-size: 16px;
width:300px;
}
a {
text-decoration: none;
}
#upbutton {
border: 1px dotted white;
}
<div class="row">
<div class="opener col" style="padding-left: 10px;padding-right: 10px;"><a class="link" href="www.google.com" name="1" onclick=" show('1');" style="color: white;font-size: 14px;">SOCIETES: 400</a>
<div class="benefits" id="b1" style="display: none; color: white; font-size: 14px;">Part SBF 120 : 120<br />
Part Filiales +100M€: 280
<div id="upbutton"><a onclick=" hide('1');">fermer</a></div>
</div>
</div>
The issue is the inline styling you've got on the link: color: white;.
This is taking priority over any styling you're adding in your CSS file. Removing that from the inline styling allows the hover color to work.
If you need the white color by default add it to the stylesheet rather than inline. For example:
.link {
color: white;
}
I am trying to create a custom-made HTML based calendar that displays the past 5 days. I have not yet created the content to be updated once the user clicks on the different dates. I'm actually still stuck on the proper styling. Right now, in its static state, the first tab (the top tab) is selected. I have given it a class to make the font larger and thereby making its containing <li> element larger.
What I would like to do is have the user click on different tabs and have the background color updated to white. From the snippet below, you will see that I got that far. However the color scheme for the other tabs becomes tricky once the user clicks on any given tab. Right now it's a simple gradient, light at the top darker towards the bottom. But suppose the user clicked in the middle. Then the gradient would have to change to have the adjacent tabs directly above and below it to have the 2nd lightest coloring (the lightest would be the active tab, being white). In my css I tried to code that in intuitively by having a class called secondTab.
Question: How do I apply a dynamic color scheme as described above based on user click? In other words, whichever tab the user clicks on will be white, and all the other tabs will update the background-color based on their relational position to the active tab?
.secondTab {
background-color: #cbdeea;
}
.thirdTab {
background-color: #a6cdd9;
}
.fourthTab {
background-color: #77b4c9;
}
.fifthTab {
background-color: #519ab6;
}
.contentTitleSize {
font-size: 50px;
}
.contentTitle {
color: #000;
height: 73px;
margin-top: 27px;
font-family: Play;
}
.contentTitle, .contentArea {
display:inline-block;
}
.contentArea {
height:320px;
width:312px;
margin-left: 25px;
overflow: hidden;
}
.subheading {
font-size: 18px;
height: 20px;
font-family: Play;
color: #77b4c9;
margin-top: 14px;
margin-bottom: 24px;
}
.outerContainer {
width:566px;
display:inline-block;
vertical-align: top;
margin-right: 27px;
}
section {
display:block;
}
*, :after, :before {
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
*, :after, :before {
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
::selection {
background: #b3d4fc;
text-shadow: none;
}
.tabPanel {
display:inline-block;
vertical-align: top;
width:160px;
margin:0;
padding:0;
}
ul {
list-style-type: disc;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}
li {
display:list-item;
}
.listTabs {
display:block;
list-style: none;
font-size: 22px;
font-family: Play;
text-align: center;
padding-top: 12px;
padding-bottom: 13px;
color: #fff;
cursor: pointer;
-webkit-box-shadow: inset 0 1px 2.5px 0 rgba(0,0,0,.11);
box-shadow: inset 0 1px 2.5px 0 rgba(0,0,0,.11);
}
.container {
height:320px;
width: 100%;
margin-bottom:24px;
border-radius: 2px;
background-color: #fff;
font-family: Roboto-Regular,serif;
line-height: 1;
box-shadow: 0 2px 5px 0 rgba(0,0,0,.1)
}
.activeFont {
color:#77b4c9;
box-shadow: none;
transition: all .2s linear;
}
.activeTab {
background-color: #fff;
font-size: 50px;
margin-top: 15px;
display:block;
}
.bottomButton {
height: 61px;
background-color: #327ca3;
border-radius: 3px;
font-size: 20px;
font-family: Play;
letter-spacing: .4px;
color: #fff;
text-align: center;
line-height: 61px;
cursor: pointer;
}
<div class="outerContainer">
<section class="container">
<ul class="tabPanel">
<li class="listTabs activeFont" role="button" id="wotdDay0-select">
<span class="activeTab">02</span>
<span>OCT</span>
</li>
<li class="listTabs secondTab" role="button" id="wotdDay1-select">
<span>01</span>
<span>OCT</span>
</li>
<li class="listTabs thirdTab" role="button" id="wotdDay2-select">
<span>30</span>
<span>SEP</span>
</li>
<li class="listTabs fourthTab" role="button" id="wotdDay3-select">
<span>29</span>
<span>SEP</span>
</li>
<li class="listTabs fifthTab" role="button" id="wotdDay4-select">
<span>28</span>
<span>SEP</span>
</li>
</ul>
<div class="contentArea">
<a class="contentTitle contentTitleSize">Content Area</a>
<div class="subheading">
<span>
<strong>First</strong>
"Second and Third"::after
</span>
<span>more info</span>
</div>
<div class="A7AhX">
<p>lots of details</p>
</div>
</section>
<div>
<div class="bottomButton">
Click Me</div>
</div>
</div>
I am trying to code a button that changes color when you hover over it/click on it. However, I ran into an issue. There is a space between the text and the edges of the div section, and if you hover over the button, it turns black but the text does not turn white. I put color:white;. I am not sure as to why this does not fix the problem.
Here is my code:
p {
margin: 0px;
}
.button {
width: 66px;
height: 20px;
border: 2px black solid;
border-radius: 4px;
padding: 5px;
}
.button:hover {
background-color: black;
color: white;
}
a {
color: black;
text-decoration: none;
}
a:hover {
color: white;
}
<div class="button">
<p> Click Me! </p>
</div>
just change your a:hover to .button:hover a
everything will look great. :>
p {
margin: 0px;
}
.button {
width: 66px;
height: 20px;
border: 2px black solid;
border-radius: 4px;
padding: 5px;
}
.button:hover {
background-color: black;
color: white;
}
a {
color: black;
text-decoration: none;
}
.button:hover a{
color: white;
}
<div class="button">
<p> Click Me! </p>
</div>
Ok so heres the deal. You made it too complex. If you had problem with the spaces, its because < a > tag is diplayed inline by default and it makes gap between it's container sometimes.
Here's your code, cleaned and working : https://jsfiddle.net/m6dphvm1/
<a class="button" href="https://www.google.com"> Click Me! </a>
a.button {
border: 2px black solid;
border-radius: 4px;
padding: 5px;
color: black;
text-decoration: none;
display: inline-block;
}
a.button:hover {
background-color: black;
color: white;
}
The problem with your CSS is that your anchor(link) color is black, when you hover on the button you are changing the background of button to black, i.e both anchor color and background are black. due to that text is not being visible.
Change either background-color of button or anchor color to a differnt color and that should work. For example I'm changing the color of anchor to blue.
.button:hover {
background-color: black;
color: white;
}
a {
color: blue;
text-decoration: none;
}
a is an inline element, meaning it's designed to be nested in plain text (or what otherwise could be). It's only occupying the immediate space around the text.
However, a tags are also totally allowed to wrap around elements according to the HTML5 spec (not that anyone would stop you otherwise, it's just convention). So if you want the a tag to occupy the entire space just wrap it around the element.
Better yet, only use the a tag. The rest is basically redundant:
<a class="button" href="https://www.google.com">
Click Me!
</a>
.button {
width: 66px;
height: 20px;
border-radius: 4px;
padding: 5px;
color: black;
border: 2px black solid;
}
.button:hover {
background-color: black;
color: white;
}
https://jsfiddle.net/hyp4a9ya/
I'm creating tabs, where each link inside the tab list is in a div with a border - something like:
In order to hide the bottom border of the tabset below the selected tab, I'm adding a pseudo element (:after) that is the full width of the link, and whose height is the same as the bottom border (2px), and also has a bottom value of negative the border height (-2px). I'm running into an issue where, depending on the position (bottom value) of the pseudo element, its rendered height changes. If I set its height to 2px, it fluctuates between 1px and 2px, and does this every 2px when moving its position.
For example, at bottom: 3px, it looks like this (I've made the background red for illustration purposes):
But then if I set bottom: 2px, I get this:
I see this behavior on both firefox and chrome. Here's a codepen illustrating.
And here's an inline snippet of the same code:
.main-container {
padding: 50px;
font-family: arial;
}
.link-container {
display: inline-block;
border: 2px solid #000;
}
a {
position: relative;
display: block;
text-decoration: none;
font-weight: bold;
color: #000;
padding: 5px 5px 15px;
}
a:hover {
background: #ccc;
}
a:after {
content: "";
position: absolute;
z-index: 1;
height: 2px;
left: 0;
right: 0;
bottom: 2px;
background: red;
}
a.tab2:after {
bottom: 3px;
}
<div class="main-container">
<div class="link-container">
<a class="tab1" href="#">Test Tab</a>
</div>
<div class="link-container">
<a class="tab2" href="#">Test Tab</a>
</div>
</div>
What's going on?
I don't know if it's still relevant or not, but I run into the same problem and I couldn't find any solution online so I came up with my own - I think this problem related either with float size of the parent element, either with something else.
But adding "transform: scaleY(1.0001);" to your pseudo-element seems to work for me
.main-container {
padding: 50px;
font-family: arial;
}
.link-container {
display: inline-block;
border: 2px solid #000;
}
a {
position: relative;
display: block;
text-decoration: none;
font-weight: bold;
color: #000;
padding: 5px 5px 15px;
}
a:hover {
background: #ccc;
}
a:after {
content: "";
position: absolute;
z-index: 1;
height: 2px;
left: 0;
right: 0;
bottom: 2px;
background: red;
transform: scaleY(1.0001);
}
a.tab2:after {
bottom: 3px;
}
<div class="main-container">
<div class="link-container">
<a class="tab1" href="#">Test Tab</a>
</div>
<div class="link-container">
<a class="tab2" href="#">Test Tab</a>
</div>
</div>
Most likely your browser is zoomed in on the page. Make sure that you're viewing the page at 100% size by clicking ctrl + 0 and see if the height still changes with the position.
Other than that, if I understand correctly what you want to achieve, you're making things much more complicated than needed.
Firstly, unless you have a reason, the link-container divs are not needed. You can just put the links directly as childs of the main-container div and add borders to them directly.
Secondly, you can just use border-bottom and set it to whatever you like.
Why don't you just do it like this: Remove the pseudo element completely and reduce the border to three sides:
.link-container {
display: inline-block;
border-top: 2px solid #000;
border-left: 2px solid #000;
border-right: 2px solid #000;
}
Here it is in your snippet:
.main-container {
padding: 50px;
font-family: arial;
}
.link-container {
display: inline-block;
border-top: 2px solid #000;
border-left: 2px solid #000;
border-right: 2px solid #000;
}
a {
position: relative;
display: block;
text-decoration: none;
font-weight: bold;
color: #000;
padding: 5px 5px 15px;
}
a:hover {
background: #ccc;
}
<div class="main-container">
<div class="link-container">
<a class="tab1" href="#">Test Tab</a>
</div>
<div class="link-container">
<a class="tab2" href="#">Test Tab</a>
</div>
</div>
Yes, I know this has been asked and answered but I can't get this working no matter what I try.
I need to remove the text decoration on a link that I have applied to a div.
The code looks like this:
#about-con a {
text-decoration: none !important;
}
div #about-con a:link {
text-decoration: none;
}
#about {
position: relative;
width: 100px;
height: 1.5em;
font-size: 1.125em;
border-top-left-radius: 25px;
border-bottom-left-radius: 25px;
border: 1.5px;
border-style: solid;
border-color: black;
}
<div id="about-con">
<a href="http://ptunitedbrochure.bkm-tech.com/about.php">
<div class="inline-nav" id="about">
<div style="margin-top: 2px; text-align: center">
About Us
</div>
</div>
</a>
</div>
Instead of this:
div #about-con a:link {
text-decoration: none;
}
Place this:
#about-con a:hover{
text-decoration: none;
color: #337ab7;
}
This will make your link text stay the same on hover. Now, if you are talking about the border around the "About Us", you will have to remove border properties from your #about div.