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;
}
Related
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"});
});
For my app, I use the Webix with the 'web' skin. I'm trying to customize the button's background when the button is:
hovered
clicked (when the mouse button still pressed)
just focused
I use the corresponding CSS-slectors:
.mouseover button:active {
background:#d7dff7;
border-color:#d7dff7;
}
.mouseover button:focus{
background:#e2d7f7;
border-color:#e2d7f7;
}
.mouseover button:hover{
background:#c2cae0;
border-color:#c2cae0;
}
The only thing I cannot reach is the active selector. In the below sample, try to click on any button and you'll see the default gray background:
http://webix.com/snippet/a5687eff
I thought it should be the class of the clicked button, but it's not working and I'm stuck with this. Any help is appreciated.
The css selector ".webixtype_base:active" has "background: #dedede!important;" in webix.css. That is why your background style for ".mouseover button:active" is being overridden.
You simply have to add "!important" so that your background style can take precedence.
See here: http://webix.com/snippet/1ee67de2
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 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"});
});
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; }