I'm having an annoying issue with IE that involves social media sharing buttons. When each list item is hovered I reveal the pink bar below the item using simple CSS:
li:hover .pinkBar{display:block;}
Unfortunately in IE when if then hover any of the share button iframes the hover seems to cancel and the pink bar in hidden again. Even though the share buttons are contained within the <li> being hovered. IE behaves as though I have hovered off the <li> when my mouse enters the iframe of one of the share buttons.
Does anyone have any ideas or solutions regarding this IE only issue?
UPDATE:
Problem fixed by using javascript to manually add and remove a class named 'hover' on mouseIn and mouseOut. I applied the same style this .hover class.
Problem fixed by using javascript to manually add and remove a class named 'hover' on mouseOver and mouseOut. I applied the same style to .hover class instead of :hover
JS:
var articleOver = function(){
$(this).addClass('hover');
}
var articleOut = function(){
$(this).removeClass('hover');
}
$('li').hover(articleOver, articleOut);
CSS:
li:hover .pinkBar{display:block;}//old method
li.hover .pinkBar{display:block;}//new method
Related
I have a menu with a lava-lamp like underline that looks like this:
The underline slides between links when clicking on them. Try a jsfiddle HERE.
My only problem is that if you click outside the menu the underline reverts back to it's original state (18%). But I want the underline to stay on the last clicked link when you click outside the menu.
I've tried :visited but it doesn't do anything.
You can actually do this with pure css using The :target pseudo class.
Here is an updated working fiddle
Note: You'll need a modern browser to use this method. (IE9+)
Also, take a look at this article which shows some clever ways to simulate click events with css (one of them being the :target pseudo class.
You may be able to do this through CSS, I really don't know.
But why don't you just use these 3 lines of JS (jQuery) and replace the Style-definition by this:
$('.ph-line-nav').on('click', 'a', function() {
$('.ph-line-nav a').removeClass('active');
$(this).addClass('active');
});
nav a:nth-child(1).active ~ .effect {
left: 18%;
/* the middle of the first <a> */
}
nav a:nth-child(2).active ~ .effect {
left: 43.5%;
/* the middle of the second <a> */
}
Seen in this jsFiddle: Click me!
Take a look at this JSFiddle example in Chrome and FireFox.
In Chrome, the button should be a tad smaller than in FireFox. I have added the solution CSS from How to reset default button style in Firefox 4 + (which made the button a little smaller) but the button is still bigger in FireFox. The difference isn't very visible in this example, but have a look at how it affects my design.
Chrome:
FireFox:
As you can see the button is thicker in FireFox and is affecting the layout. Is there any way of avoiding this short of using styled divs in place of buttons?
Also, I'm using Meyer's CSS reset stylesheet
Firefox adds a special padding to inputs and button elements. This takes care of it:
button::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner {
padding: 0 !important;
border: 0 none !important;
}
I have concluded that the only way of ensuring that button/submit inputs remain identical across browsers is to recreate them using divs. Creating button inputs is easy since you can attach click events onto divs the same way as on buttons. Creating submit inputs is barely any harder. I solved it using jQuery by declaring a class, for instance 'submit', and adding the submit button functionality to all elements that have that class on load. Here's an exampe:
// On page load:
$('.submit').on('click', function(e) {
$(this).closest('form').submit();
});
Divs with the submit class that are not in a form will do nothing when clicked.
If you add tabindex="n" (where n is a number) to the element, it can also be focused using tab, just like a normal button. You can also style it to show that it's focused by using the :focus css pseudo-class. Then you could use space or enter to click the button with this event handler:
$('.submit').on('keypress', function(e) {
if (e.keyCode == 13 || e.keyCode == 32)
$(this).closest('form').submit();
});
(I wrote that last snippet in a hurry and haven't actually tested it. If you find an error in it or test it successfully please edit this answer accordingly.)
Have you by any chance set a line-height on the buttons on your page? You haven't on the fiddle, but line-height's other than normal, aren't accepted on firefox, and some other browser I believe - maybe IE, I'm not sure.
Have you tried a CSS reset? I dont have FF on this computer or else I would check if this works.
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.5.1/build/cssreset/cssreset-min.css">
I want to set the colour for the active link. My links have the inner span like the following.
<span>Home</span>
I have style it like the following but it did not work.
a:active span{
color:yellow;
}
What css rule should I write for this to work.
Thanks in advance.
The correct CSS is as follows. You should replace the = with a :.
a:active span {
color: yellow;
}
Edit
This is a response to the comment
I want to set the color of the link to yellow when index.php display
This is not what :active does. This text is taken from w3.org. ( http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes )
The :active pseudo-class applies while an element is being activated by the user. For example, between the times the user presses the mouse button and releases it.
If you want to style the page that is currently being viewed you have to do that server side.
This should work, its valid, but maybe you expect it to do something else then what it does. :active is not the selector for the menu item you selected or something, like the menu item you selected is yellow on the page after as a #current link or something.
Something else:
Note: :active MUST come after :hover (if present) in the CSS definition in order to be effective!
Ok I have now virtually fixed our menu system.
The only Issue I have now, seemingly is onclick change menu item state to ACTIVE
So here is the fiddle: http://jsfiddle.net/ozzy/6pxaE/
Essentially, onclick I need the menu item clicked to change to:background color #ec008c and color to #fff with no text shadow. As seen in my Fiddle Above.
Everything else seems to work fine.
Any help appreciated. No JS please
Assuming what you want is to highlight the currently active page in the navigation, I think this is still the easiest way to accomplish what you want.
Would that work?
To make all of your 'active' states pink-ish, the following worked on your last lines of CSS:
.white ul li a:active, .white li a:active{ background-color:#ec008c;color:#fff;display:block;text-shadow: none !important;
}
http://jsfiddle.net/ExUdM/
I only tested this in Chome, Firefox, and IE9
I was looking here at CSS :active Selector.
The :active selector styles links to
active pages
That got me thinking, what the heck is an 'active page' in HTML/CSS terminology...
At this point I went to the w3docs Section : 5.11.3 The dynamic pseudo-classes: :hover, :active, and :focus.
The :active pseudo-class applies while
an element is being activated by the
user. For example, between the times
the user presses the mouse button and
releases it.
So I used one of the w3shools try it pages and hack together an example, substituting the following code, which you can just cut & paste and try.
<html>
<head>
<style type="text/css">
:focus,:active
{
outline-offset: 10px;
outline: solid;
}
</style>
</head>
<body>
<p>Click the links to see the background color become yellow:</p>
w3schools.com
wikipedia.org
<button type="button">Click Me!</button>
<form>
<input type="text"/>
</form>
</body>
</html>
The form field works for :focus. But the button or links don't work for :active.
Why is that? Is there something about 'active page' I'm not understanding that w3schools talked about.
I saw this nice tip when Googling for it, but I don't think it's related.
There is no concept of "active page" in CSS. In fact, the SitePoint Reference debunks this by saying:
The pseudo-class does not signify a link to the active, or current, page—that’s a common misconception among CSS beginners.
What the spec says is right: :active simply styles elements that are activated, e.g. clicked (as in the example given) or in some other way triggered such that the browser starts navigating to the link's target.
Note that it doesn't just apply to <a> elements; it may apply to any non-form-input element that's clicked. For instance, you can do this:
p:active {
color: red;
}
And any paragraph you click will flash its text red.
Note however that the exact definition and implementation is left up to the browser, but in general, you can rely on <a> elements having an activated state.
:active is the style given to an element (a or a button, for example) when the mouse is held down over it. You might have seen it visible on some sites when you click a styled button; when you actually click the button, it might change. This is the :active pseudo-class.
I've always used :active for links. The split second before the browser takes you to the page you just clicked on, the text would change to the color you called in a:active{ ... }
Example:
a:active { color:pink; font-weight:bold; }
Most browsers support it, but it's really not worth your time to style it. Back in the day of 56k dial up it was a nice thing to have to visually show that the link the user clicked was being loaded.