When using tab to navigate my site, is there a way to make an active link act as if the mouse is hovering over it? I have several sub-stylesheets for different colors and a master one for things such as spacing, is there a way that I can make an active element act as css hover without duplicating my hover code?
Why dont you add it like so:
a:hover,
a.active { color:#000; }
And you won't be repeating the same line.
Related
My question can be very complex, because I don't know either what I am talking about, I am literally a newbie at coding.
So, a have a header mega menu, but the titles in it don't hover when the mouse is over. I want them to be hovered, but their CSS class is "menu-item" and when I apply the hover css on this, every menu on my theme gets hovered.
What should be my solution? The element ID's in my mega menu starting with 50xxx like "menu-title-5082" or "menu-title-5083" and the other menu titles, like main menu, are starting with another numbers. So I thought it would be a solution, when I select all elements starting with 50xx. But how can I do that, or would it be a solution? Thanks!
My code was:
.menu-item:hover {
background-color: #dddddd;
}
and it didn't work properly because all menu items affected, so I tried this:
.menu-item-50:hover {
background-color: #dddddd;
}
and it didn't work at all.
What do you suggest?
My menus in my application looks something like this :
But I want the menu items to have a different background color. So I tried adding :
QMenu::item:selected {
background-color:green;
color:white;
}
And now it looks like this :
Notice that when I hover my mouse over the menu, there is some sort of 'unalignment' with the menu items. How can I resolve this issue?. Any help would be highly appreciated!
The built-in style system and CSS are mutually exclusive. If you're styling a control via CSS, you must style all of it. By applying CSS to one style of a menu item, you've lost the rest of the built-in style, and your CSS must then take care of all aspects of the styling. I.e. you need to style also non-selected items!
Hello I am trying again for an answer - the first time someone advised me on how to get what I want for hover, but I want it for when you click on the menu link.
I am a relative beginner to web development and am currently redesigning my DJ website.
http://www.jameswinfield.co.uk/v2.html
Within the top-left menu, I want to have a div that drops down upon clicking the Events tab (to show the next event I am DJing at).
I would rather do it without JavaScript/jQuery if possible.
I have tried various ideas but none are working.
Please can you help.
Thanks James
This can't be achieved with pure CSS, if you want your element to be toggle-able.
You can use :active on a link in CSS to change the styling (ex: show the next div ) but this won't work if the style changes should persist once you stop clicking on the element.
A little hack to get this to work is to use the :target selector in CSS. Your HTML would look something like this :
Click to toggle
<div id="your_element">This will show up when you click on the link.</div>
And in CSS ..
#your_element{display: none;}
#your_element:target{display: block;}
Example : http://jsbin.com/pifiwezaji/1/
The main issue with this is that your element will be shown until the page is refreshed, I don't think there's a way to hide it again without using some Javascript. The browser support for the :target selector is pretty good, supported by all browsers except IE8 and below.
That being said, I would recommand using Javascript/jQuery for this. It will take only a couple of lines and it will be a lot easier to manage.
CSS has no click event handling. What it does have is the :hover pseudo-element, which you can use with transition to create what you want.
I'd do something like this:
HTML:
<div class='expandable'>
...stuff...
</div>
CSS:
.expandable {
background:#f00;
height:50px;
overflow:hidden;
transition:width 1s ease;
width:50px;
}
.expandable:hover {
width:200px;
}
(untested)
In plain English, this says:
A div that has the class expandable shouldn't have any overflow and
it should be 50 x 50 with a red background. If the width changes,
transition it over 1 second. When it's hovered, change the width to
200px.
That should get you started. Good luck!
I have an issue using the slicknav responsive menu, if the navigation buttons have a different background colour set for the hover in the stylesheet, if you hover over the actual tag text the background colour changes correctly, but if you hover over any part of the button away from the text, then the colour behind the actual text doesn't change. So you get a rather ugly box around the text in the original colour. This is happening in all browsers tested.
I cannot find any way to stop this happening, the css file is not that complicated. I've used Slicknav now on a few sites and always had the same problem, but this time I really need to fix it.
You can see an example of this here: http://www.yorkluxuryholidays.co.uk/
In responsive mode, hover anywhere over one of the menu items that have sub menus, but not directly over the menu text itself, and the area behind the text does not change colour.
This is the css I'm using for the hover:
.slicknav_nav .slicknav_item:hover {
background:#59584e;
color:#fff; }
.slicknav_nav a:hover{
background:#59584e;
color:#fff;}
It seems to make no difference which class you set the colour on, either or both, the behaviour is exactly the same.
I'd love to know if there is a way to fix this with the css!
Add in your css :
.slicknav_nav a:hover * {
color:#fff;
background-color:#7b9fc7;
}
I have a dropdown menu and want to change background of parent's button when hovering submenus. Any ideas how to achieve this so it will work not only in all modern browsers but preferably in IE8/IE9 too?
Simple example, I want to change background of link "This black" while hovering his children ("When hover me" & "and me").
Is it possible with pure CSS?
http://jsfiddle.net/PExLW/
I was thinking about adding certain classes when hovering certain li but it sounds like an overkill, also, adding classes on hover doesn't sound like a good idea.
sure, just take out the a
ul li:hover { ... }
example jsfiddle (or fullscreen)