I have the following style
.c-breadcrumb-item {
display: inline-block;
font-size: 1.3em;
font-weight: 500;
letter-spacing: 0.8px;
text-transform: uppercase;
color: rgba($base-color, 0.5);
&:not(:nth-last-child(2)) {
.c-breadcrumb-link {
color: rgba($base-color, 0.5);
cursor: pointer;
&:hover {
text-decoration: underline;
}
&:active {
color: $base-color;
text-decoration: underline;
}
}
&:after {
content: '>';
padding: 0 4px;
}
}
&:nth-last-child(2) {
animation: fadeIn 0.4s;
.c-breadcrumb-link {
color: $sky-blue;
}
}
}
the initial state is as expected without the second after element from last
<div class="c-breadcrumb" data-test="c-breadcrumb">
<span class="c-breadcrumb-item"><a class="c-breadcrumb-link">All</a></span>
**<span class="c-breadcrumb-item"><a class="c-breadcrumb-link">Region number 2</a></span>**
<span class="c-padding-simulate"></span>
</div>
but the issue is when I remove one breadcrumb item,the after element still visible with box-sizing: border-box
<div class="c-breadcrumb" data-test="c-breadcrumb">
**<span class="c-breadcrumb-item"><a class="c-breadcrumb-link">All</a></span>**
<span class="c-padding-simulate"></span>
</div>
please help me to solve it
Related
I have created five feedback stars using HTML and CSS. Below is the image for the same.
As you can see that stars are way too close to each-other. I want to apply some space between the stars. I have used margin, padding everything. But nothing is working. Below is the code:
.ratings {
position: relative;
vertical-align: middle;
display: inline-block;
color: #b1b1b1;
overflow: hidden;
}
.full-stars {
position: absolute;
left: 0;
top: 0;
white-space: nowrap;
overflow: hidden;
color: #fde16d;
}
.empty-stars:before,
.full-stars:before {
content: "\2605\2605\2605\2605";
font-size: 14pt;
}
.empty-stars:before {
-webkit-text-stroke: 1px #848484;
}
.full-stars:before {
-webkit-text-stroke: 1px orange;
}
/* Firefox */
#-moz-document url-prefix() {
.full-stars {
color: #ECBE24;
}
}
<div class="ratings">
<div class="empty-stars"></div>
<div class="full-stars" style="width:70%"></div>
</div>
Below is the working fiddle:
https://jsfiddle.net/4qqspqxh/862/
Could you please help me to make some gap in between the stars?
Try this:
.empty-stars:before, .full-stars:before {
content: "\2605\2605\2605\2605";
font-size: 14pt;
letter-spacing: 4pt;
}
.empty-stars:before, .full-stars:before {
content:"\2605\2605\2605\2605";
font-size: 14pt;
}
Give spaces changes in content like this::
.empty-stars:before, .full-stars:before {
content:"\2605 \2605 \2605 \2605";
font-size: 14pt;
}
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 want to remove blank spaces between the buttons, so that when I for example hover over the NORMAL button, there will be no blank space between it and the HARD button. How can I do that and where do these blank spaces come from?
body {
margin: 0;
}
#stripe {
background-color: white;
text-align: center;
height: 50px;
color: black;
}
button {
border: none;
background: none;
text-transform: uppercase;
height: 100%;
font-weight: 700;
color: black;
letter-spacing: 1px;
font-size: inherit;
transition: all 0.3s;
outline: none;
}
button:hover {
color: white;
background: black;
}
.selected {
color: white;
background: black;
}
<div id="stripe">
<button class="mode">Easy</button>
<button class="mode">Normal</button>
<button class="mode selected">Hard</button>
</div>
Browsers always add spaces between some elements, including buttons. To remove these, you need to set font-size to zero for their parent container. Then, to restore text size inside buttons, set font-size for them.
#stripe {
font-size: 0;
}
button {
font-size: 14px; // Set font size that you need here
}
Either remove the spaces and carriage returns, or put an HTML comment between them.
body {
margin: 0;
}
#stripe {
background-color: white;
text-align: center;
height: 50px;
color: black;
}
button {
border: none;
background: none;
text-transform: uppercase;
height: 100%;
font-weight: 700;
color: black;
letter-spacing: 1px;
font-size: inherit;
transition: all 0.3s;
outline: none;
}
button:hover {
color: white;
background: black;
}
.selected {
color: white;
background: black;
}
<div id="stripe">
<button class="mode">Easy</button><!--
--><button class="mode">Normal</button><!--
--><button class="mode selected">Hard</button>
</div>
Add display: flex; to the parent container
If using bootstrap, can group buttons together by wrapping in div with class="btn-group".
Example for v3.3.7: https://getbootstrap.com/docs/3.3/components/#btn-groups-single
Visually might or might not be what you want. Has rounded corners on left and right ends and straight line between buttons. Can probably restyle.
I have tried everything, but I cannot manage to make the button smaller in the width and height.
.c--anim-btn span {
color: white;
text-decoration: none;
text-align: center;
display: block;
}
.c--anim-btn,
.c-anim-btn {
transition: 0.3s;
}
.c--anim-btn {
height: 64px;
font: normal normal 700 1em/4em Arial, sans-serif;
overflow: hidden;
width: 200px;
background-color: #3b5998;
}
.c-anim-btn {
margin-top: 0em;
}
.c--anim-btn:hover .c-anim-btn {
margin-top: -4em;
}
<!-- HINT: hover over button -->
<div class="c--anim-btn">
<span class="c-anim-btn">
First Text
</span>
<span>
Second Text
</span>
</div>
If someone please can tell me a solution, I would be very grateful.
Change the CSS property of c--anim-btn class
.c--anim-btn span {
color: white;
text-decoration: none;
text-align: center;
display: block;
}
.c--anim-btn,
.c-anim-btn {
transition: 0.3s;
}
.c--anim-btn {
height: 24px; /* change height */
font: normal normal 700 1em/1.6em Arial, sans-serif;
overflow: hidden;
width: 100px; /* change width */
background-color: #3b5998;
}
.c-anim-btn {
margin-top: 0em;
}
.c--anim-btn:hover .c-anim-btn {
margin-top: -1.6em;
}
<!-- HINT: hover over button -->
<div class="c--anim-btn">
<span class="c-anim-btn">
First Text
</span>
<span>
Second Text
</span>
</div>
you need to adjust line height and margin top after change height because of text seen. Comment out onn css please take a look .c--anim-btn and .c--anim-btn:hover
.c--anim-btn span {
color: white;
text-decoration: none;
text-align: center;
display: block;
}
.c--anim-btn, .c-anim-btn {
transition: 0.3s;
}
.c--anim-btn {
height: 128px;
font: normal normal 700 1em/8em Arial,sans-serif; /* 1em/8em means font-size/ line-height */
overflow: hidden;
width: 500px;
background-color: #3b5998;
}
.c-anim-btn{
margin-top: 0em;
}
.c--anim-btn:hover .c-anim-btn{
margin-top: -8em; /*Here you need to adjust after line-height change */
}
<!-- HINT: hover over button -->
<div class="c--anim-btn">
<span class="c-anim-btn">
First Text
</span>
<span>
Second Text
</span>
</div>
I am trying to get a link to be half one color and half another color, then switch upon hover. So: (white)Hello (Blue)Everyone! -> (Blue)Hello (White)Everyone!
I think I may have dumbed down the code too much... this is a better example.
How do I get it to where "EVERYONE!" does not have a box around it?
HTML:
<div class="home-logo-text">
<a href="#">
HELLO
<span class="home-logo-text-roads">
EVERYONE!
</span>
</a>
</div>
CSS:
.home-logo-text a {
font-family: 'Oswald', sans-serif;
font-size: 60px;
font-weight: 700;
text-transform: uppercase;
position: relative;
margin-bottom: 0px;
text-align: center;
line-height: 1;
padding: 5px 25px 0;
border: 5px solid;
color: #808080;
}
.home-logo-text-roads {
font-family: 'Oswald', sans-serif;
font-size: 60px;
font-weight: 700;
text-transform: uppercase;
position: relative;
margin-bottom: 0px;
text-align: center;
line-height: 1;
padding: 5px 25px 0;
border: 5px solid;
color: #6698cb;
}
.home-logo-text.light a {
color: rgba(255,255,255,0.9);
}
.home-logo-text a:hover {
color: #6698cb;
}
.home-logo-text a:hover .home-logo-text-roads {
color: #808080;
}
a:hover .home-logo-text-roads {
color: #ffffff;
}
Your last CSS rule doesn't look right:
.home-logo-text-roads a:hover {
color: #ffffff;
}
This CSS says "for an <a> element sitting inside a .home-logo-text-roads element, when it gets hover change its text color to #ffffff. Which is clearly not what you wanted, since you have no <a> element inside your span. If you want to change the span's color on hover event of the <a> which is its parent, switch the selectors around:
a:hover .home-logo-text-roads {
color: #ffffff;
}
Remember when there's a space between selectors it indicates a fuzzy hierarchy and the rules are applied to the element to the far right.
You need this. Use whatever color you want.
.home-logo-text a:hover .home-logo-text-roads {
color: #707070;
}
Check DEMO here.
Put the correct order of the HTML elements so CSS styles will be applied:
.home-logo-text a {
color: #707070;
}
.home-logo-text-roads {
color: #6698cb;
}
.home-logo-text a:hover {
color: #6698cb;
}
.home-logo-text a:hover .home-logo-text-roads {
color: #ffffff;
}