Ok, so I'm developing some sort of gallery/meal picker for some web application. When I hover over those fields, those white ones, meal should appear in the middle. That works great, but when I hover over those white fields in Chrome, I can't see the :hover effect on them. It still works, but without the effect. While on Firefox and IE-11 works perfectly. Here is the code link.
http://codepen.io/anon/pen/yyjKBQ
Code:
.dorucak {
display: none;
}
.dorucak + label {
bottom: 0px;
margin-right: 2px;
padding: 5px;
border: 1px solid black;
width: 10%;
background: white;
/*font-size: 24px;*/
display: inline-block;
}
.dorucak:hover + label {
color: white;
background: black;
cursor: pointer;
}
.dorucak:checked + label {
color: white;
background: purple;
}
.dorucak + label:hover {
color: white;
background: black;
cursor: pointer;
}
.dorucak:hover + label:hover {
color: white;
background: black;
cursor: pointer;
}
For Chrome I had to add :hover on both radio button class and label, and now it works. Sorry for posting this and fixing it a minute later.
Related
I'm trying to get a round button which has a an outline in the same color but that doesn't seem to be possible. The outline always ends up squared. Is there a method to achieve that with a or does it maybe only work with a ?
button {
width: 40px;
height: 40px;
border: none;
border-radius: 40px;
cursor: pointer;
background-color: black;
display: inherit;
outline: 5px solid black;
outline-offset: 5px;
}
<button></button>
I have added a picture since this only seems to happen on Safari...Screenshot from Safari snippet
I need it to work in all browsers especially on mobile though.
You can use this "hack".
INFO: In Brave Browser we got a square too with your snippet;
button {
position: relative;
width: 40px;
height: 40px;
border: none;
border-radius: 40px;
cursor: pointer;
background-color: black;
display: inherit;
margin:10px 2px;
}
button::after {
position: absolute;
top: -10px;
content: '';
left: -10px;
width: 50px;
height: 50px;
border: 5px solid black;
border-radius: 40px;
background-color: transparent;
display: inherit;
}
<button></button>
Safari fixed this bug on Safari Technology Preview 157. Source: https://webkit.org/blog/13575/release-notes-for-safari-technology-preview-157/
According to your question and code snippet that you have provided. From my browser when I ran both the button and the outline was Circle.
I would suggest you to clear your cache and run the code again OR try changing the browser.
Or please update your question with a screenshot as well, so that we can understand better.
I'm trying to get a round button which has a an outline in the same color but that doesn't seem to be possible. The outline always ends up squared. Is there a method to achieve that with a or does it maybe only work with a ?
button {
width: 40px;
height: 40px;
border: none;
border-radius: 40px;
cursor: pointer;
background-color: black;
display: inherit;
outline: 5px solid black;
outline-offset: 5px;
}
<button></button>
I have added a picture since this only seems to happen on Safari...Screenshot from Safari snippet
I need it to work in all browsers especially on mobile though.
You can use this "hack".
INFO: In Brave Browser we got a square too with your snippet;
button {
position: relative;
width: 40px;
height: 40px;
border: none;
border-radius: 40px;
cursor: pointer;
background-color: black;
display: inherit;
margin:10px 2px;
}
button::after {
position: absolute;
top: -10px;
content: '';
left: -10px;
width: 50px;
height: 50px;
border: 5px solid black;
border-radius: 40px;
background-color: transparent;
display: inherit;
}
<button></button>
Safari fixed this bug on Safari Technology Preview 157. Source: https://webkit.org/blog/13575/release-notes-for-safari-technology-preview-157/
According to your question and code snippet that you have provided. From my browser when I ran both the button and the outline was Circle.
I would suggest you to clear your cache and run the code again OR try changing the browser.
Or please update your question with a screenshot as well, so that we can understand better.
How can I avoid that there is a dotted selection rectangle around the text when the user clicks the button, see image below. I already tried to add the css rule user-select: none;, which I saw in another question, but this doesn't seem to work.
Any suggestions?
EDIT: The issue only appears in Firefox (tested with version 47.0)
.button {
background-color: #1a1a1a;
border: none;
color: #f8f8f8;
padding: 10px 40px;
text-align: center;
display: inline-block;
font-size: 16px;
border-radius: 4px;
user-select: none;
-webkit-transition-duration: 0.3s;/* Safari */
transition-duration: 0.3s;
}
.button:hover {
background-color: #595959;
/* Green */
color: white;
}
<button class="button">Button</button>
For remove the dotted border in buttons in Firefox:
button::-moz-focus-inner {
border: 0;
}
Simply put this in your CSS :
.yourclass
{
outline:none;
}
Hope it helps.
button.button:focus {
outline: 0;
}
I just created a button with a dropdown menu, you can view the demo here.
In the demo I added a black background to shopping-cart-wrapper element so you can see where the problem lies.
The problem is when you hover over the button you can keep your mouse on the black background and the dropdown menu is still visible.
I only want the dropdown menu to be visible when you hover over the button or keep your mouse on the dropdown menu.
Here is the code I have:
HTML:
<div class="shopping-cart-wrapper">
<a class="shopping-cart" href="#" alt="my-shopping-cart">My Shopping Cart (0)</a>
<div class="shopping-cart-dropdown">
<div class="empty-cart"><span>Your shopping cart is empty</span></div>
</div>
</div>
CSS:
.shopping-cart-wrapper:hover .shopping-cart-dropdown {
opacity: 1;
display: block;
}
.shopping-cart-wrapper {
display: inline-block;
background: #000;
margin-top: 5px;
margin-left: 15px;
}
.shopping-cart {
border: 1px solid #d3d3d3;
color: #656565;
padding-right: 10px;
padding-top: 8px; padding-bottom: 8px;
padding-left: 40px;
font-weight: bold;
display: inline-block;
font-size: 13px;
text-align: right;
text-decoration: none;
box-shadow: 0px 1px 0px #f2f2f2;
background: #f8f8f8 url("http://placehold.it/32x32") no-repeat 0 0 ;
position: relative;
}
.shopping-cart:hover {
background: #fff url("images/cart-sprite.png") no-repeat 0 -29px ;
color: #202020;
border: 1px solid #c6c6c6;
box-shadow: 0px 1px 0px #e5e5e5;
}
.shopping-cart-dropdown {
opacity: 0;
display: none;
border: 1px solid #d3d3d3;
padding-bottom: 80px;
position: relative;
right: 49px;
width: 247px;
background: #f6f6f6;
font-size: 12px;
font-weight: bold;
}
.empty-cart{
background: #202020;
padding: 10px;
color: #fff;
text-align: center;
position: relative;
}
What's Going On
The problem here really isn't a problem, because everything is working as it is supposed to. When you hover over the container, the child is visible. Then the child is visible, the parent becomes larger to encompass it.
Current Selector:
To fix this, you have a couple options. The easiest would be to use a sibling selector instead of a parent. Select the a inside .shopping-cart-wrapper instead of .shopping-cart-wrapper itself, and use the + sibling selector.
We've got to be careful though, because we want the child to stay visible when the mouse is hovering over itself. When using the parent as a selector, this is automatic. With a sibling, we have to manually do this. We'll use both the sibling and the child itself as selectors.
Code
Working Example
Current:
.shopping-cart-wrapper:hover .shopping-cart-dropdown {
opacity: 1;
display: block;
}
Working:
.shopping-cart-wrapper a:hover + .shopping-cart-dropdown,
.shopping-cart-dropdown:hover {
opacity: 1;
display: block;
}
Further Information
http://reference.sitepoint.com/css/adjacentsiblingselector
I've done some sort of reverse engineering to make the nav-tabs component in Bootstrap to work as a step element. This is similiar to the step element used in semantic UI
Now, I managed to get this far (overriding the nav-tabs CSS and adding the styles for the arrows) but there are some issues I cannot figure out
I don't know how to space the text out nicely, especially starting from the 2nd step text. I change the padding/margin of the arrows but it messes the positioning of the others (or that also needs to be tweaked)
When you hover over the anchor tag its fine. but then, when an element is active, and you hover over just the arrow (the triangle sort of), that gets highlighted whereas it should highlight the entire previous step element that can be clickable (if you get the gist of how it needs to be in a step wizard sort-of)
Any tips on this? it's some pseudo class setting i'm missing or repeating somewhere!
.nav-steps>.step:after {
position: absolute;
z-index: 2;
content:'';
top: 0em;
right: -22px;
border-bottom: 23px solid transparent;
border-left: 23px solid orange;
border-top: 24px solid transparent;
}
.nav-steps .step:hover:after {
border-left-color: pink;
}
http://jsfiddle.net/chou_one/NemwU/
P.S there might be a cleaner approach to this, maybe with spans?
YOu add 99% correct :) instead of adding the ARROW to the <li> you need to add it to the <a>, where is a working demo.
CSS code change:
.steps-headers {
text-align: center;
}
.nav-steps {
border: none;
padding-bottom: 1px;
background-color: orange;
display: inline-block;
overflow: hidden;
}
.nav-steps>li>a {
margin-right: 0px;
line-height: 1.428571429;
width: 180px;
}
/* step arrow style */
.nav-steps>.step a:after {
position: absolute;
z-index: 2;
content: '';
top: 0px;
right: -30px;
border-bottom: 23px solid transparent;
border-left: 23px solid orange;
border-top: 20px solid transparent;
width: 31px;
}
/* disable step arrow style for last item */
.nav-steps>.step:last-child a:after {
display: none;
}
/* HOVER STYLE */
/* hover state */
.nav-steps>li a:hover {
background-color: pink;
color: white;
border-radius: 0px;
}
/* step arrow color on hover:after */
.nav-steps .step:hover a:after {
border-left-color: pink;
}
/* ACTIVE STYLE */
/* active state */
.nav-steps>li.active>a, .nav-steps>li.active>a:hover, .nav-steps>li.active>a:focus {
background-color: yellow;
color: black;
border-radius: 0px;
}
/* step arrow color on active:after */
.nav-steps .step.active a:after {
border-left-color: yellow;
}