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
Related
I'm trying to code a website and every time I edit the images there's a mouseover effect and I want to have a plain image on the webpage. The image is grayed out and when I mouseover it's not. How can I make it stay normal without having to mouseover? When I click, it opens a link and just opens the same page. SOS.<img src="images/image.jpg" alt="image" class="border2" />
If you have CSS stylesheets they may be causing the difference, use inspect element on it and see what styles are active and click on the :hov then the :hover button next to the filter bar in the styles tab to see how it changes. Then look at the style side with hover activated and see where, if any, there are places with :hover in their selector. Next find the place in your stylesheet where that selector is and copy its contents into the selector without :hover
Example
<button class="btn">Press Me</button>
which would then be styled by both:
.btn {
background-color: white;
}
.btn:hover {
background-color: blue;
}
this would mean that when not hovered the button is white but then becomes blue when you hover over it. A similar thing may be happening to your image with something along the lines of:
.border2 {
background:#ffffff;
opacity: 0.5;
}
.border2:hover {
opacity: 1;
}
found this on Grey out all images other than active hover image
my hover only works on first page when page is activated. Only home page change color when I click on it, but other pages dont change color, can you help me? here is code
#meni li a:hover {
color: #000;
}
#meni li.active a {
color: #000;
}
I saw last question about this and I have HTML DOCTYPE on all pages, thanks :)
I know that press signal in css is :active, but i still can't find a proper way to make a toggle switch for the link.
For example, <a> has the color blue, when <a> will be pressed first time, it's color should be red, when it is pressed second time, it's color should blue again. So basically first press is a toggle switch from blue to red, and second is vice versa.
I have used :target action which didn't seem to work out:
a {
color: blue;
}
a:active {
color: red;
}
a:target {
color: red;
}
How could this be possible without use of JS? So i could toggle switch the link color to red on the first click, and then blue again at the second.
You can do it via checkboxes and labels.
HTML:
<input type="checkbox" id="t1" class="toggle">
<label for="t1">Link with toggling color</label>
CSS:
.toggle {
position: absolute;
left: -99em;
}
.toggle:not(:checked) + a {
color: blue;
}
.toggle:checked + a {
color: red;
}
Working example here.
This is not possible to achieve without JS. Links are not designed to be toggle elements, and CSS has nothing to track multiple clicks on an element (it is either being clicked or is not).
If you want to represent a toggle, then look at checkbox inputs instead. They have a :checked pseudo-class.
There is one way you could (sort of) achieve this purely with CSS but it would mean that, in its initial state the link would actually be unclickable, which probably wouldn't be desirable.
The trick is to set the pointer-events of the anchor tag to none, wrap it in another element with a tabindex attribute (to allow it to gain focus) and then, when the wrapping element receives focus, change the colour of the anchor and reset its pointer-events. On the next click, the link will receive focus but this will remove the focus from the wrapping element, which will revert the anchor's styles back to their initial state.
*{color:#000;font-family:sans-serif;outline:0;}
a{
color:#00f;
pointer-events:none;
}
span:focus>a{
color:#f00;
pointer-events:initial;
}
<span tabindex="-1">link</span>
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.
.cshtml
<li>#Html.ActionLink("Tools", "Index", new { Area = "", Controller = "Tools" })</li>
.css
a:active
{
font-weight: bold;
background: #F96611;
border: 3px solid #FFB380;
}
a:active works only between mouse click press and release. But I need the menu to be in highlighted after the mouse click of a menu. Thanks
You cant add in css. .active applies for click only but not for active state. you can use the below jquery code for adding class on click
$('li').click(function() {
$(this).addClass('youractiveclass');
})
after the mouse click of a menu , it becomes "visited"
you should add this to your css :
a:visited
{
font-weight: bold;
background: #F96611;
border: 3px solid #FFB380;
}
also there you can do it for a.hover and a.link
This is possible with CSS (using visited). The CSS active pseudo-class applies only for the duration of the click, not afterwards. If you want a lasting effect, use visited, or better, Javascript. Through javascript you can also customize it so that the style is added or removed with alternate clicks:
$("#menu").click(function() {
$(this).toggleClass('highlightclass');
});
Active state works only while you holds on mouse button on a link. That's how it's supposed to be.
Check this fiddle to understand: http://jsfiddle.net/8fqGp/
If you want to persistently highlight the menu item, you should follow Sowmya's or Cupidvogel's answer.