Develop Reference

Change dropdown background color in CSS

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;
}

CSS/JavaScript - Adding the :focus state when an element is hovered

So I have a navigation bar using standard Bootstrap 3 classes and structure, recently I wanted to see if you could open the drop down menus on hover.
I did some searching and found this snippet:
.dropdown:hover .dropdown-menu{
display: block;
}
This opens the menu on hover, which is great (without having to toggle .dropdown-toggle
My issue is that my .dropdown-toggle has a focus state, which only happens when focus is given to the element, so when I hover and the menu opens my hover state is never applied, as I do not have to click on the top menu item anymore.
So the question is: is there a way to force the :focus state when :hover is active?
I tried to do this:
.dropdown:hover #home .dropdown-toggle:focus{
background: #00aaff;
border: #00aaff 1px solid;
}
So basically on hover add styles to the focus, but I think what I actually need to do is add the :focus class on :hover so is this more a JavaScript thing?

$(".dropdown").hover(function(){
$('#home .dropdown-toggle').focus();
});
And in css
#home .dropdown-toggle:focus{
background: #00aaff;
border: #00aaff 1px solid;
}
when the focus is on, the css gets apply.

I see it as 'a JavaScript thing'. You can attach a 'mouseover' event to the menu, which, when triggered, will change the menu's CSS and the CSS of the .dropdown-toggle element.
I do not think it makes a lot of sense to trigger "focus" state for CSS modification if you are using JavaScript (in this particular example, I will use JQuery library).
A simple example: https://jsfiddle.net/matu2vd6/5/
HTML:
<div class='dropdown'>My dropdown element.</div>
<div class='dropdown-toggle'>My dropdown-toggle element.</div>
JS/JQUERY:
let dropDownEl = $(".dropdown");
let dropDownToggleEl = $(".dropdown-toggle");
dropDownEl.on("mouseover", function() {
dropDownToggleEl.css({"background": "#00aaff",
"border": "#00aaff 1px solid"});
});
dropDownEl.on("mouseout", function() {
dropDownToggleEl.css({"background": "transparent",
"border": "none"});
});

Hover effects remain after clicking external link

When I hover over a clickable link on my homepage, the styling changes as expected (i.e. the border becomes blue or the link has text-decoration). However, when I click the link to open in a new window (either it has target=_blank set or if I command + click the link), that link's styling persists until I click elsewhere on the page.
Why does the styling not revert back immediately?
Here are a few things I've tried:
a, a:link, a:active is set to text-deocration: none;. On hover, I've put a bottom border instead of changing text-deocration to underline.
a:hover, a:focus {
border-bottom: 1px solid blue;
}
I've tried playing around with a, a:visited, but as I read, I cannot change text-decoration. https://developer.mozilla.org/en-US/docs/Web/CSS/Privacy_and_the_:visited_selector
I've ensured that Google Analytics tracking returns true and that it's not stopping event propagation.
To note, I'm using Bootstrap.
Would appreciate some other idea. Thanks.

When you click on the link it becomes focused. Change your second CSS rule to remove the a:focus.
a:hover {
border-bottom: 1px solid blue;
}

Changing the color of a text in a link on hover

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

Expand link (a) across image and text

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"});
});