I've encountered this weird bug with the hover effect in Chrome 46.
There's a list of items and only some of them should highlight when hovered over, but the result is not as expected.
Furthermore, when opening debug and enabling the hover effect on the element that should highlight, it starts working fine afterwards.
It seems like the second hover rule is not triggering for some elements
ul.listings li.listing:hover {
border-color: #ccc;
}
ul.listings li.listing:hover div.special {
color: red!important;
}
Fiddle: http://jsfiddle.net/celsum/nLrveyfs/
It works fine in Firefox 42 and IE 10.
Also, a screenshot of what's happening in case it's a non-issue for others: http://snag.gy/oHG9v.jpg
This problem is due to the fact that your div.special is of different height than li.listing. So when you hover only on the word 'Special', the color changes to red and it does not change to red when you hover on the list containing div.special(This is the problem which I found in Chrome 47). So for this, I have added some changes to your CSS:
div.special{
height:60px;
}
ul.listings li.listing div.special:hover{
color: red!important;
}
Also here is an Updated Fiddle for the same.
Hope this helps.
EDIT:
If you just want to change the style of the div.special when li.listing is hovered then change your CSS like this:
ul.listings li.listing div.image div.special:hover{
color: red!important;
}
Here is a JSFiddle for the same.
Related
I'm trying to style a <select> elements background-color on :hover and at the same time leave the styling of the <option> dropdown untouched. It seems to me that this issue occurs only in Firefox and not in Chrome/Safari.
Chrome select with background color
Firefox select with background color
This would be the code snippet. Please notice that I don't want to have the dropdown to be affected by the background-color in Firefox. Also: Not only the background color changes. Also the borders change. The whole "native" look gets lost as soon as I give the select a background-color.
select {
background-color: red;
}
<select><option>Option</option></select>
Thanks in advance.
Why not to try to set the properties of the options in select too, something like:
select option{
background-color: blue;
}
I think I've found a proper workaround.
We need to apply the hover color to a parent div and use :focus-within.
div:focus-within {
background: red;
}
select {
background: transparent;
border: 0;
}
<div><select><option>Option</option></select></div>
if you go here and add "Piept de pui la gratar" to your cart, there will be a popup.
I tried modifying the close button's CSS because I want it fully yellow (including hover and non-hover states), but it just doesn't seem to work.
I've tried setting the color and background-color. The background color seems to work, but I don't want to change it. Setting the color to yellow just doesn't seem to make it. Any help is appreciated.
CSS Code:-
a#thp-close-id {
color:yellow;
background-color: yellow;
}
Also tried:-
.thp-close {
color: yellow;
background-color: yellow;
}
I also tried flagging the color property as !important, but it didn't work.
The reason why it doesn't work, it's because you are trying to apply those styles to the wrong 'element', as the close button uses its pseudo classes, see screen:
So in order to achieve what you need, try writing this css instead:
.thp-close:before,
.thp-close:after {
background-color: #f4c001;
}
In chrome the below button will retain it's outline after it has been clicked. If I looked at the buttons css settings after selecting the :active checkbox in chrome's developer tools I still can't see what the CSS values are for the outline. It appears to be about 1px in width and grey visually, but I don't see these values. Is there a way to see them?
<body>
<button style="background-color: aquamarine; margin-top: 50px; margin-left: 50px;">HI</button>
</body>
In other words google chrome does add this style (As indicated by one of the answer below):
:focus {
outline: -webkit-focus-ring-color auto 5px;
}
However when I click the focus checkbox in order to be able to see all the CSS that is triggered by focus, I don't see that style in the developer tooling pane ... Is it a google developer tooling bug or do other people see it?
There are actually two different styles that are automatically applied through through the user agent stylesheet to buttons; the pseudo-classes :focus and :active:
:focus {
outline: -webkit-focus-ring-color auto 5px;
}
button:active {
border-style: inset;
}
The :focus only applies to Chrome, and is responsible for the blue border you are seeing. Overriding this fixes the problem:
button:focus {
outline: none; /* Remove the outline */
}
button.active: {
border-style: none; /* Remove the border */
}
<body>
<button style="background-color: aquamarine; margin-top: 50px; margin-left: 50px;">HI</button>
</body>
You can see that the :focus is getting added in the Developer Console through the user agent stylesheet (just below the inline elements in this screenshot):
Hope this helps! :)
The styles console in the chrome developer tools only shows what is currently selected in it's current state. If you want to see the rules for the other states a simple way is to go to the css file it self. To do that next to the element class there is a link as shown in the image below. Clicking this will open the actual css file in the specific row of the selected class. Assuming the other states are declared close to that you'll be able to locate the class you want.
Can you post a link to the website?
In the meantime, I would suggest looking the "Computed" styles tab
Side note about why this might be happening--I've noticed sometimes I haven't been able to see the :active styles when it's JavaScript controlling the button's state
Edit: Hi Ole, I can see your demo, thanks.
Based on Obsidian Age's helpful reply, I ran this code snippet and it got rid of the borders on click. That's the behavior you want, right?
<body>
<style>
button:focus {
outline: none; // Remove the outline
border-top: none;
border-width: 0;
}
button.active: {
border-style: none; //Remove the border
}
</style>
<button style="background-color: aquamarine; margin-top: 50px; margin-left: 50px;">HI</button>
</body>
By looking in the "Computed" tab (next to "Styles" when you're inspecting an element in Chrome), I saw that there was a gray, 2px-wide border-top, -right, -bottom, -left for the button. For some reason it was enough just to set the border-top property to none and the border-width to 0. I don't know why but I tried a bunch of other combinations that didn't work--this did it with the least amount of CSS.
i've got problem. I cant force the code to hover h3and div "underline" at the same time.
Thereis my code: https://jsfiddle.net/nac3570n/
As you can see hover's working but doesnt affect to underline at the same time, unless u'll move cursor on underline
Try changing this:
.underline:hover {
background-color: red;
}
to this:
a:hover .underline {
background-color: red;
}
Basically we move both :hover events to trigger on the same action. In this case, hovering over the parent <a> tag.
https://jsfiddle.net/qmg6wbv5/1/
...fiddle doesn't use your exact styles, but you'll have an easier time using a pseudo element (:after) on the h3, I think. That way it naturally responds to hovering the h3. Hope that gets you on the right track.
I have a link (styled as a button):
go to external site
And I have a hover on this button class, like:
.button {
background-color: green;
}
.button:hover {
background-color: red;
}
So far, no problem. I hover the button, it turns red. I click it and a new page opens in a new tab. When I go back to my website the hover is gone and the button is green again. BUT that only works in some browsers!
In chrome (my version 47.0.2526.80) my button hovers red, I click on the external page and when I go back to my site the button still shows the hovered red color. Only if I move my cursor the hover deactivates. Like somehow the hover is sticky.
Has anyone experienced this issue? Is this a browser bug? Any ideas for a workaround?
Use focus, it did the trick for me :)
Here is a codepen
http://codepen.io/anon/pen/YwEvod
.button:focus {
background-color: green;
}
a:visited, a:focus {
color: green;
}
try that - if not it may just be chrome