I'm currently working with a set of links that are getting their background images replaced when they are focused, hovered over, and non-focused; but right now I also need to fix it so that when you hover a focused link you'll get yet another result. My searching hasn't found anything and my experiments with anything like:
a:focus:hover { background:url(image.url) no-repeat;}
have met with less than desired results. Does anyone know of way to simply do what I'm trying for?
This should work, but focus won't work in IE without a valid doctype, so I doubt :focus:hover will fare any better.
Solution found, that method does work; but only when you remember to include the class and sub-class names that you are applying to an item.
Related
I have this navigation that only appears on smartphones. For testing purpose you can see a desktop version here: http://dknytkom.dk/forside/
I am trying to replace the anchors "menu" and "Søg" with icons using background image. But for some reason the styling rules only affects one of either. If I switch the order of the css command lines, I get to select the other.
I've tried using attributes, like a[href="..."]; I've tried using a:nth-child(...), and finally given them an id each but to no avail.
Anyone got a clue?
first of all we appreciate if you post the css selector code that apply to just one of them.
second as i understand your path to the picture has problem, correct it and then tell us what was the result.
if you have problem with selector use a very specific one like these two:
for first one use : a#menu-knap.counter
for second you can use a#soege-knap.counter
Sorry for the inconvenience. I remove some css comment around the statements, and yup, it worked.
I'm clueless how to get the scrollbar display below the active box - list item.
After searching I have found that the z-index should work on element positioned other than static. But still I'm still unable to produce the desired effect.
This is just one part of my problem, I believe if I understand the solution to this one, I can also fix another similar problem.
Somehow the active box is displayed on top of the scrollbar, but not the scrollbar's handle.
Here's the JsFiddle. Should be quite easy to notice my problem.
The desired effect is that the scrollbar and everything related to it (handle) is displayed below the active(longer, red) box.
Sorry, don't really see a way to accompany this problem with code inside the post or how to make the JsFiddle with less code.
I think you'll have to apply a z-index to the .scrollbar element itself, rather than its child .scroller. Add these styles to your definition of it:
.scrollbar {
z-index:-1;
position:relative;
}
And you should get (what I hope is) your desired behaviour. Here's an updated JSFiddle for you to see what this achieves. If this isn't what you were looking for, feel free to let me know and I'll be happy to help further. Good luck!
Think I know the answer to this one, but just thought there may be some genius out there whos know of a way to do this...
Basically I am making a site editor kind of thing and it would be amazingly handy if I could replicate the way Firebug and the Chrome console highlights elements when you hover over their code in the html/elements tabs of those inspectors...
Its not something I can do with background effects because that does not highlight the whole Div (the contents show above the highlight) and I don't think there is anyway of making a div overlay over the top of all the content but have it not block mouseovers on underlying elements...
Anyone any ideas? Is there any browser specific code that achieves this kind of thing?
In general, Firefox extensions are mostly JavaScript. Since Firebug is BSD licensed, you can browse its source code on its project site. Maybe you'll find the relevant code and get an idea how to solve your specific task.
You could add an outline in CSS on mouseover - that would highlight the element without changing its position, as outline does not effect layout. A box-shadow would also work similarly.
In fact, it looks to me like Firebug adds a dark bluish box-shadow to elements to highlight them.
Further info : the button is actually only greying out when I go to use it: on mouse~over it
fades, becomes inactive.
I have swapped the CSS Declaration responsible, to use on another TextArea in a different website, and it is happy there, behaves as expected. However, taking a working CSS declaration from outside, and swapping it into the CSS for the Textarea I am having difficulty with, find that the problem persists. So I conclude it is very unlikely the CSS is at fault; at least as far as the textarea.
What area of code should I examine next to try to pin this down?
Okay, this is strange to me, but the error was related to z-index.
The problem was the z-index applying to the DIV containing the problematic textarea,
was higher than that for the textarea itself. So: some way, the up button was not displaying or behaving rather, properly.
The moment I raised the z-index of the Textarea, to a value higher than the containing div, the problem went away.
Anybody stumbling on this question, who may know why just one element was affected, feel free to add a comment, some insight would doubtless be more valueable, but for now, I stumbled on the (a) solution.
What is the simplest and most elegant way to simulate the hover pseudo-class for non-Anchor tags in IE6?
I am specifically trying to change the cursor in this instance to that of a pointer.
I think the simplest way is to use the hover.htc approach. You add the hover.htc file to your site, then reference it in your stylesheet:
body { behavior:url("csshover.htc"); }
If you want to keep things as clean as possible, you can use IE conditional comments so that line is only rendered users with IE6.
Regarding your request -- I am specifically trying to change the cursor in this instance to that of a pointer -- the easiest way is to specify cursor:pointer in your css. I think you will find that works in IE 6.
Try this to verify (where div can be any element):
<div style="background:orange; cursor:pointer; height:100px; width:100px;">
Hover
</div>
I would say that the simplest method would be to add onmouseover/out Javascript functions.
Another alternative that will fix many more issues in one go is to use IE7.js.
Another approach, depending on what the item is, is to add a non link anchor and set its display to block. Either put the anchor within or surrounding the item you want the pseudo hover behavior on.
Aside:
I actually already needed to swap the image anyhow
Make sure you take a look at Image Sprites. Sometimes its much nicer to use one image and "shift" the image then to use two separate images and "toggle" or "swap" between them. In my experience its been much nice when as user interacts with it is sometimes an advantage that there is a single request for the 1 image then multiple requests for multiple images.
I liked the mouseover/out best since I actually already needed to swap the image anyhow. I really should have thought of doing this with javascript to begin with.
Thanks for the quick answers.
#Joseph
Thanks for that link. I had never heard of this technique before and really like the idea.
I will definitely try that out and see how I fare with it.
If your willing to use JQuery, I would use Set Hover Class for Anything technique.