CSS
/* Hide Radio button */
.rate > input{
display: none;
}
.rate{
display: inline-block;
border: 0;
}
.rate > label{
float: right;
}
/* Showing the stars */
.rate > label:before{
display: inline-block;
font-size: 1.1rem;
font-family: FontAwesome;
content: "\f005";
margin:0;
padding:0.3rem .2rem;
cursor: pointer;
}
/* Half star */
.rate .half:before{
content: "\f089";
position: absolute;
padding-right: 0;
}
/* Click and hover */
input:checked ~ label, label:hover ~ label{
color: #ffb503;
}
/* Hover highlight */
input:checked + label:hover, input:checked ~ label:hover, input:checked ~ label:hover ~ label,
label:hover ~ input:checked ~label{
color: #cc9000;
}
I try to click on starts and remains saved at least on frontend to see them as checked but after i click one start it don't remain with that color, instead it remains the same as the beginning.
How to fix it so after i click to see the input ( to see the stars colored )
Related
atm I need to have 3-4 tabs section on the same HTML document, but duplicating this snippet doesnt work. Also I've changed all the class names and it still doesnt work.
I want all of them to be open at its first tab. Not only one section open at time.
This is what I need: the idea and this is what I am getting: the problem
/*
CSS for the main interaction
*/
.tabset > input[type="radio"] {
position: absolute;
left: -200vw;
}
.tabset2 > .input2[type="radio"] {
position: absolute;
left: -200vw;
}
.tabset .tab-panel {
display: none;
}
.tabset2 .tab-panel2 {
display: none;
}
.tabset > input:first-child:checked ~ .tab-panels > .tab-panel:first-child,
.tabset > input:nth-child(3):checked ~ .tab-panels > .tab-panel:nth-child(2),
.tabset > input:nth-child(5):checked ~ .tab-panels > .tab-panel:nth-child(3),
.tabset > input:nth-child(7):checked ~ .tab-panels > .tab-panel:nth-child(4),
.tabset > input:nth-child(9):checked ~ .tab-panels > .tab-panel:nth-child(5),
.tabset > input:nth-child(11):checked ~ .tab-panels > .tab-panel:nth-child(6) {
display: block;
}
.tabset2 > .input2:first-child:checked ~ .tab-panels2 > .tab-panel2:first-child,
.tabset2 > .input2:nth-child(3):checked ~ .tab-panels2 > .tab-panel2:nth-child(2),
.tabset2 > .input2:nth-child(5):checked ~ .tab-panels2 > .tab-panel2:nth-child(3),
.tabset2 > .input2:nth-child(7):checked ~ .tab-panels2 > .tab-panel2:nth-child(4),
.tabset2 > .input2:nth-child(9):checked ~ .tab-panels2 > .tab-panel2:nth-child(5),
.tabset2 > .input2:nth-child(11):checked ~ .tab-panels2 > .tab-panel2:nth-child(6) {
display: block;
}
/*
Styling
*/
body {
font: 16px/1.5em "Overpass", "Open Sans", Helvetica, sans-serif;
color: #333;
font-weight: 300;
}
.tabset > label {
position: relative;
display: inline-block;
padding: 15px 15px 25px;
border: 1px solid transparent;
border-bottom: 0;
cursor: pointer;
font-weight: 600;
}
.tabset2 > .label2 {
position: relative;
display: inline-block;
padding: 15px 15px 25px;
border: 1px solid transparent;
border-bottom: 0;
cursor: pointer;
font-weight: 600;
}
.tabset > label::after {
content: "";
position: absolute;
left: 15px;
bottom: 10px;
width: 22px;
height: 4px;
background: #8d8d8d;
}
.tabset2 > .label2::after {
content: "";
position: absolute;
left: 15px;
bottom: 10px;
width: 22px;
height: 4px;
background: #8d8d8d;
}
.tabset > label:hover,
.tabset > input:focus + label {
color: #06c;
}
.tabset2 > .label2:hover,
.tabset2 > .input2:focus + .label2 {
color: #06c;
}
.tabset > label:hover::after,
.tabset > input:focus + label::after,
.tabset > input:checked + label::after {
background: #06c;
}
.tabset2 > .label2:hover::after,
.tabset2 > .input2:focus + .label2::after,
.tabset2 > .input2:checked + .label2::after {
background: #06c;
}
.tabset > input:checked + label {
border-color: #ccc;
border-bottom: 1px solid #fff;
margin-bottom: -1px;
}
.tabset2 > .input2:checked + .label2 {
border-color: #ccc;
border-bottom: 1px solid #fff;
margin-bottom: -1px;
}
.tab-panel {
padding: 30px 0;
border-top: 1px solid #ccc;
}
.tab-panel2 {
padding: 30px 0;
border-top: 1px solid #ccc;
}
As you can see, I have duplicated the classes to look if it works with two checked tabs, but It doesnt work. The most I can get is to have they both working, but not at the same time.
You can see the complete code in this codepen: Snippet link. Thanks for the help. I am really lost trying to have these sections, first time doing it, hahaha.
Trying out nested drop down menu using simple css.I am Trying to make navigation menu. All seems to work fine except that when I hover over the ABOUT US section under the NEW HERE, it shows me correct result. but the problem is it doesn't go away when i hover to the next section below it. how can i possibly fix that ? here's The Link For the snippet for you to consider, kindly tell me where i am doing it wrong.
here's the code for you to see..
.dropbtn2
{
position: relative;
display: none;
}
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 169px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
font-size:20px;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
transition:none;
}
.dropdown-content a:hover {
padding-top:15px;
transition:ease-in-out .5s;
}
.dropdown:hover .dropbtn
{
background-color: #8300ff;
color: #182318;
padding-top: 500px;
padding-bottom: 30px;
padding-right: 20px;
padding-left: 20px;
transition: ease-out 0.5s;
text-decoration: none;
box-shadow:none;
}
/* End*/
.dropdown-content2 {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width:170px;
left:170px;
top:0;
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content2 a {
color: black;
font-size:20px;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content2 a:hover {background-color: #f1f1f1}
/* Show the dropdown menu on hover */
.dropdown-content:hover .dropdown-content2 {
display: block;
transition:none;
}
.dropdown-content2 a:hover {
padding-top:15px;
transition:ease-in-out .5s;
}
.dropdown a:hover .dropbtn2
{
padding-bottom: 30px;
padding-right: 20px;
padding-left: 20px;
transition: ease-out 0.5s;
text-decoration: none;
box-shadow:none;
}
/*TEST*/
You need to change the element to hover in order to display your dropdown-content only when hovering your first link.
The value to replace is at line 182 of your codepen. Replace dropdown-content:hover .dropdown-content2 by .dropdown2:hover .dropdown-content2.
Lines 181-185:
/* Show the dropdown menu on hover */
.dropdown2:hover .dropdown-content2 { /* change the hover element here */
display: block;
transition:none;
}
I need to apply #roll animation in the last li:after element that contains background-color: #a1c642. How can i do this?
#-moz-keyframes roll {
0% { width:0; }
100% { width:100%; }
}
#-webkit-keyframes roll {
0% { width:0; }
100% { width:100%; }
}
.multi-steps > li.is-active:before, .multi-steps > li.is-active ~ li:before {
content: counter(stepNum);
font-family: inherit;
font-weight: 700;
}
.multi-steps > li.is-active:after, .multi-steps > li.is-active ~ li:after {
background-color: #ededed;
}
.multi-steps > li.is-active-acao-lojista:before, .multi-steps > li.is-active-acao-lojista ~ li:before {
content: counter(stepNum);
font-family: inherit;
font-weight: 700;
}
.multi-steps > li.is-active-acao-lojista:after, .multi-steps > li.is-active-acao-lojista ~ li:after {
background-color: #ededed;
}
.multi-steps {
display: table;
table-layout: fixed;
width: 100%;
}
.multi-steps > li {
counter-increment: stepNum;
text-align: center;
display: table-cell;
position: relative;
color: #a1c642;
z-index:99!important;
}
.multi-steps > li.is-active {
color: #a1c642!important;
}
.multi-steps > li.is-active-acao-lojista {
color: darkorange!important;
}
.multi-steps > li:before {
content: '\f00c';
content: '\2713;';
content: '\10003';
content: '\10004';
content: '\2713';
display: block;
margin: 0 auto 4px;
background-color: #fff;
width: 36px;
height: 36px;
line-height: 32px;
text-align: center;
font-weight: bold;
border-width: 2px;
border-style: solid;
border-color: #a1c642;
border-radius: 50%;
}
.multi-steps > li:after {
content: '';
height: 2px;
width: 100%;
background-color: #a1c642;
position: absolute;
top: 16px;
left: 50%;
z-index: -1;
}
.multi-steps > li:last-child:after {
display: none;
}
.multi-steps > li.is-active-acao-lojista:before {
background-color: #fff;
border-color: darkorange;
}
.multi-steps > li.is-active:before {
background-color: #fff;
border-color: #a1c642;;
}
.multi-steps > li.is-active ~ li {
color: #808080;
}
.multi-steps > li.is-active ~ li:before {
background-color: #ededed;
border-color: #ededed;
}
.multi-steps > li.is-active-acao-lojista ~ li {
color: #808080;
}
.multi-steps > li.is-active-acao-lojista ~ li:before {
background-color: #ededed;
border-color: #ededed;
}
<ul class="list-unstyled multi-steps">
<li>Pedido recebido</li>
<li class="is-active">Pagamento aprovado</li>
<li class="is-active-acao-lojista">Faturar pedido</li>
<li class="is-active-acao-lojista">Enviar dados rastreio</li>
<li>Confirmar entrega</li>
</ul>
I try something like:
.multi-steps > li:after:last-child{
animation-name: roll;
animation-duration: 5s;
animation-timing-function: linear;
}
Also tried:
.multi-steps > li::after:nth-last-child(2){
animation-name: roll;
animation-duration: 5s;
animation-timing-function: linear;
}
but nothing happens.
Just try to change "li::after:nth-last-child(2)" to "li:nth-child(2)::after". What you are writing is wrong. You cannot select a last child and a nth at the same time.
Keep in mind that the child selector is applied to the li itself. So it should come right after it. Then, you can select the pseudo element that is inside the li child you wanted to stylize.
I have a series of subtabs that I want to make look like , except with more space between the items.
I am using psuedo elements and have successfully created a triangle on the right side of the element, but now I want to create an inset triangle on the left side. I have tried to use :before and with right:100% but it doesn't accomplish anything.
I was thinking I could do something like this, but no matter how I try and place it I can't seem to "cut" out a triangle from the left side....
.tabs > ul > li:before {
position: absolute;
content: " ";
height: 0;
width: 0;
top: 0;
right: 100%;
border: 1.65em solid #fff;
}
When using the above it just cuts out a little chunk from the triangle on the right.
Full jsfiddle of the working bits. (make sure you expand the preview to large width to actually see it in action)
.tabs {
padding-top: 0.5em;
padding-bottom: 1em;
padding-right: 40px;
}
.tabs > ul {
display: flex;
justify-content: space-between;
}
.tabs > ul > li {
position: relative;
display: inline-block;
background: #eeeeee;
padding: 1em;
line-height: 1.25em;
color: #ffffff;
}
.tabs > ul > li > a {
color: #ffffff;
font-family: Lato-Regular;
font-size: 1.2em;
}
.tabs > ul > li:after {
position: absolute;
content: " ";
height: 0;
width: 0;
top: 0;
left: 100%;
border: 1.65em solid transparent;
}
Update
Per Aaron's suggestion below I tried playing with z-index to get the before element to work. It looks like it's a step in the right direction but not wholly working yet. jsfiddle
1) It's not all the way to the left
2) It's a rectangle instead of a triangle
I did use the #Aaron answer and changed
.tabs > ul {
display: flex;
justify-content: space-between;
}
for
.tabs > ul {
display: flex;
justify-content: flex-start;
white-space: nowrap;
}
it'll look better when the width changes
here's the fiddle
Change the z-index of the :after pseudo to show the angle, then use the before pseudo to create the white section below the main angle.
You may have to fiddle with the height and width of the :before to make it wok exactly as you need.
.tabs {
padding-top: 0.5em;
padding-bottom: 1em;
padding-right: 40px;
}
.tabs > ul {
display: flex;
justify-content: space-between;
}
.tabs > ul > li {
position: relative;
display: inline-block;
background: #eeeeee;
padding: 1em 1em 1em 2em;
line-height: 1.25em;
color: #ffffff;
}
.tabs > ul > li > a {
color: #ffffff;
font-family: Lato-Regular;
font-size: 1.2em;
}
.tabs > ul > li:after {
position: absolute;
content: " ";
height: 0;
width: 0;
top: 0;
left: 100%;
border: 1.65em solid transparent;
z-index: 2;
}
.tabs > ul > li:before {
position: absolute;
content: "";
height: 0;
width: 0;
top: -3px;
left: 0;
border-width: 1.85em 1.65em 1.85em 1.85em;
border-style: solid;
border-color: transparent transparent transparent #fff;
z-index: 1;
}
.tabs > ul > li:nth-child(1):after {
border-left-color: red; }
.tabs > ul > li:nth-child(1) {
background: red; }
.tabs > ul > li:nth-child(2):after {
border-left-color: orange; }
.tabs > ul > li:nth-child(2) {
background: orange; }
.tabs > ul > li:nth-child(3):after {
border-left-color: gray; }
.tabs > ul > li:nth-child(3) {
background: gray; }
.tabs > ul > li:nth-child(4):after {
border-left-color: deepskyblue; }
.tabs > ul > li:nth-child(4) {
background: deepskyblue; }
.tabs > ul > li:nth-child(5):after {
border-left-color: blue; }
.tabs > ul > li:nth-child(5) {
background: blue; }
.tabs > ul > li:nth-child(6):after {
border-left-color: purple; }
.tabs > ul > li:nth-child(6) {
background: purple; }
.tabs > ul > li:nth-child(7):after {
border-left-color: green; }
.tabs > ul > li:nth-child(7) {
background: green; }
<div class="tabs">
<ul>
<li>Qualification</li>
<li>Profile</li>
<li>Skills Assessment</li>
<li>Interview Prep</li>
<li>Debrief</li>
<li>Offer</li>
<li>Follow Up</li>
</ul>
</div>
I am soooo close and yet 3 different methods I've tried to get text over an image on a hover is defying me.
What I am trying to do is to have a list on the left, hover over any one of the 6 elements on the left and have the image on the right change with text on it. The first image should be the default shown image.
You will see that I've tried 3 different ways to get text to show up on the first 3 elements. No matter how I do it, the text always shows up on all 3 elements as opposed to JUST the hovered element.
Here is the live test site: http://oppcess.test-lca-website.com/
This is a WordPress site using Headway Themese(GUI theme creator).
Here is the jsfiddle of the section where the issue is: http://jsfiddle.net/DragonDon/6aw6jc99/ (It's going to looked messed as it's not the full site but more just a custom code in a container.
<div class="switch prehover texthover">
<ul>
<li>
One Stop
<img src="" alt="" />
<h2><span>All required services in one location</span></h2>
</li>
<li>
Private
<img src="http://oppcess.test-lca-website.com/wp-content/uploads/2015/02/private.png" style="width:67%;" alt=""/>
<h2><span>Personal information and requirements are kept completely confidential.</span></h2>
</li>
<li>
Personal
<img src="http://oppcess.test-lca-website.com/wp-content/uploads/2015/02/Personal.png" style="width:67%;" alt=""><p class="personal"></p></img>
</li>
<li>
Cross border
<img src="http://oppcess.test-lca-website.com/wp-content/uploads/2015/02/Crossborder.png" style="width:67%;" alt=""/>
</li>
<li>
Execution
<img src="http://oppcess.test-lca-website.com/wp-content/uploads/2015/02/execution.png" style="width:67%;" alt=""/>
</li>
<li>
Services
<img src="http://oppcess.test-lca-website.com/wp-content/uploads/2015/02/Service.png" style="width:67%;" alt=""/>
</li>
</ul>
.switch ul {
display: inline-block;
height: 100%;
position: relative;
list-style-type: none;
width: 100%;
padding: 0;
}
.switch li {
font: bold 16px/100px sans-serif;
list-style-type: none;
height: 100%;
}
.switch a {
border-right: 1px solid #444;
border-top: 1px solid #444;
color: red;
display: block;
text-align: center;
text-decoration: none;
width: 33%;
}
.switch li:first-child a {
border-top: none;
background: #1f3552;
color: white;
}
.switch li:nth-child(2) a {
color: white;
background: #1f3552;
}
.switch li:nth-child(3) a {
color: white;
background: #1f3552;
}
.switch li:nth-child(4) a {
color: white;
background: #1f3552;
}
.switch li:nth-child(5) a {
color: white;
background: #1f3552;
}
.switch li:nth-child(6) a {
color: white;
background: #1f3552;
}
.switch a: {
color: #fff;
}
.switch li:nth-child(2) a:hover {
color: #fff;
}
.switch li:nth-child(3) a:hover {
color: #fff;
}
.switch li:nth-child(4) a:hover {
color: #fff;
}
.switch li:nth-child(5) a:hover {
color: #fff;
}
.switch li:nth-child(6) a:hover {
color: #fff;
}
.switch img {
background: red;
display: none;
height: 100%;
position: absolute;
right: 0;
top: 0;
}
.switch li:nth-child(2) img {
background: blue;
}
.switch li:nth-child(3) img {
background: green;
}
.switch li:nth-child(4) img {
background: yellow;
}
.switch li:nth-child(5) img {
background: gray;
}
.switch li:nth-child(6) img {
background: black;
}
.switch a:hover + img,
.switch img:hover {
display: block;
}
.prehover {
background-image: url("http://oppcess.test-lca-website.com/wp-content/uploads/2015/02/onestop.png");
background-repeat: no-repeat;
background-position:right top;
background-size: 67% ;
}
.li-hover img {
height: 100%;
width: 100%
}
.texthover h2 span {
color: white;
font: bold 55px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 10px;
position: absolute;
right: 5%;
bottom: 10%;
}
.personal:before {
content: "Providing one on one, bespoke consultation by taking all client needs into consideration.";
color: red;
font: bold 55px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 10px;
position: absolute;
right: 5%;
bottom: 10%;
}
You are doing the toggle(show/hide) only for image sibling and not the text.
.switch a:hover + img, .switch img:hover {
display: block;
}
You can wrap all text in a container with say class .details and use the general sibling combinator ~ for selecting the elements after the anchor in this case. Keep the .details hidden at first and toggle on hover
.details {
display: none;
}
.switch a:hover ~ div.details {
display: block;
}
Demo fiddle
Add z-index: 1; on below codes to show the image at the top
.switch a:hover + img, .switch img:hover {
display: block;
z-index: 1;
}