I am using a WordPress plugin which creates the following output:
<li>
<img src="/media/image-thumbnail.png"/>
Post Title
</li>
I applied an a:hover style for both the image and the text. But of course they are triggered separate of each other, as there are two links being generated. I would like to have them triggered both on hover (in my case: image border color changes and text color changes - no matter which of the two elements are being hovered).
Of course I could fiddle into the plugin source and change how it is built there, but due to update-ability I thought it would be cleaner to change it with a few lines of jQuery. Unfortunately I don't know how to approach this and would be thankful for ideas!
Add the hover on the li
FIDDLE
li:hover img
{
border: 2px solid green;
}
li:hover a
{
color: orange;
}
With Jquery you could use the hover function.
Something like this
$('.wp_rp_thumbnail, .wp_rp_title').hover(function(){
$('.wp_rp_thumbnail img').css({"border":"1px solid #fff"});
$('.wp_rp_title').css({"color":"#fff"});
});
Related
My code loads various items on some button click event into the document.
I managed to set the focus properly on the first item from those freshly loaded items once there all have been displayed using the following code:
$(function () {
$("a.getfocus").focus();
});
This works but I would also like the browser's default outline to show up on this focused item.
Is there any easy solution to achieve this ?
With the :focus pesudoselector to the element and the outline property:
outline: [properties]
Say, you have a link which usually shows an outline on focus (yep, that's the default behaviour):
<a id="test" href="https://test.com">Test</a>
With CSS, you can do the following:
#test {
outline: 1px dotted red;
}
to get a red outline. Usually, you'd want to do:
a {
outline: none;
}
Back to your question, you can do:
a:focus {
...
// rules
...
}
You can see a small sample here.
I am currently trying to customise OTRS 5 and have got most things how I want them by creating a custom skin and overriding the default CSS. However, all of the dropdown menus are orange on hover but this seems to be set somewhere in the Javascript files and not in raw CSS. Does anyone know which files I need to change to override this background color to another?
Thanks
It's still pure CSS here!
You'd want to use these CSS selectors in your skin, the first one is the hover color and the second one is the class for the currently active navigation button.
#Navigation > li:hover {
border-color: blue;
}
#Navigation > .Selected {
border-color: green;
}
This is kind of tricky. I'm using this js effect that changes my navigation color as you scroll through different sections. So when you scroll past the section with the class "green" it changes the hover border color of my nav. This is usually how it's done
.midnightHeader.green a:hover {
border: 3px solid #2b5999;
}
the problem is, I have other links in my header which I don't want to apply this to. So I only want to style the links inside the unordered list items, but the following code doesn't work.
.midnightHeader.green nav ul li a:hover {
border: 3px solid #2b5999;
}
Basically would I style the "nav ul li a:hover" inside ".midnightHeader.green"
Please have a look at midnight.js it explains how this works
Can anyone help me work this one? Thanks
I have the following html and css:
http://jsfiddle.net/5hX6S/
The idea is to have a list of items which are links and then when the user scrolls over the list item it lights up in a different color and the color of the text inside changes to white.
You can see how it all looks in the jsfiddle above, my problem is that the whole item's background does change into orange but the text does not. The text only changes if you scroll directly above it, which is not enough. I'd also like to make the whole list a link, not just the text inside of it.
I tried putting a div, span, nothing inside of the list and moving that class that you see around using the following css:
.side_menu_link:hover {
background: #ff7200;
color: #fff !important;
}
But nothing works. The only thing that succeeded so far was moving the 'a' tags outside of the 'li' tags but as far as I'm concerned that's not the right way to do it syntax wise. So any suggestions?
Here you are
http://jsfiddle.net/iamnotsam/5hX6S/4/
You needed to replace this
a:hover {
text-decoration: none;
color: #fff;
}
with this
#left_menu ul li:hover a {
text-decoration: none;
color: #fff;
}
Are you trying to have the hover effect on the link? Or the list itself? If you want the link to change color on hover then in your CSS have
.side_menu_link a:hover {
color: color;
}
etc.
You want
.side_menu_link:hover a { ... }
^^^--- note this
instead, so that the new background color applies ONLY to the <a> tag, not the entire <div class="side_menu_link">.
a:hover{color:red;background:green}
Home
I am creating a side menu with 4 - 5 menu items. On page load event all sub menu are hide and when user click on main menu it's sub menu will only been show. I am able to achieve most of the stuff but the only confusing part is:
When I re size my page everything looks hazy. Like text is over written on menu box.
When mouse over any main menu it should show red under line.
When I click on any sub menu it's text color should be red.
[model][fiddle]
If possible, can any one guide me or show me what I am doing wrong.
Thanks in advance.
1: Try changing the size of #master to be absolute (in pixels) instead of a percentage for smaller screen sizes, using media queries.
2: Can be done in CSS using borders, like this:
.expanded > a:hover { border-bottom: 1px solid #f00; }
3: Also done in CSS like this:
#master > li > ul a:active { color: #f00; }