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)
Related
I am trying to modify the CSS in a Wordpress plugin I need to use. The stylesheet (learnpress.css) is over 2000 lines long, so understanding it is a challenge; but what I'm trying to do is pretty simple -- change the background color of a certain class.
The code is at https://tgtau.rickcasey.net/courses/the-great-turning-you/, but when I change the background color of the section-content class in Chrome's developer tools, nothing happens:
Can anyone point out how I can find out what other css styles are overriding this? Other posts only hint at CSS being difficult to diagnose how inheritance and precedence work, so I'm hoping there are some techniques in chrome-dev-tools on how to do that. Thanks!
The background is set in the li elements themselves, so no matter what you set your ul background to, it won't be visible as the contained li elements are not transparent (solid white).
When debugging these cases, remember that every element can have its own background color, and containers can auto-size to their contents. You can also override the css on the li elements to make them transparent so that your ul background is visible.
Is it possible to make a :hover on the :before element so that something shows over it?
Yes it can be done like..
.selector:hover:before {/* css rule goes here */}
It is impossible to add a :hover style (or :active, or :focus) to any elements like :before or :after. They would have to be applied to an actual HTML element, not a pseudo-element.
From your screenshot, it appears you're trying to create a hover menu. Depending on your styles, you may be able to apply the :hover styles to the ul itself. However, you'll only be able to control ul styles with CSS - you cannot control li styles based on the hover state of their parent without JS.
If JS is an option, use it - it should be pretty simple in this case, and would make the code a lot easier. If css-only is a requirement, you might be able to get around this by setting the <ul> to a specific height (large enough to show the hover item but nothing else), and give ul:hover a larger height, or height: auto;, etc.
Its called offcanvas
Refer https://www.w3schools.com/howto/howto_js_off-canvas.asp
AND https://v4-alpha.getbootstrap.com/examples/offcanvas/
Let me know if you require any further help
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;
}
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.