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
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.
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)
I'm trying to do something pretty simple: an <a> tag with a background image. The code is found here, http://jsfiddle.net/QWatA/
The problem is that for some reason I can't set the width of the <a> tag in this code. If I had just a normal background and set it with a width it works fine. However seems like if I do it this way I have no control over the width. Ideally I want all the links to have highlights of the same width.
The reason I'm doing this is that I want a different background image for each of the links, so I'm forced to define all those a.class1, a.class2 stuff.
Thanks!!
Add display:inline-block; to your 'a' elements. By default 'a' is display:inline and so does not establish box with width/height.
http://jsfiddle.net/QWatA/1/
yea c-smile beat me to it just put display: block in your css, however if your going to do a.class1, a.class2 and so on with new pictures put it in your ul li a instead of in the a.class1 a.class2 and so on then you only have to write the code once.
When i animate things with jQuery .animate(). I always take care to use .stop(false,true) to avoid strange animation behaviors.
In this case i wanted to make a navigation appear on the hover of certain sections. Here is a demo:
http://jsfiddle.net/meo/Kbeg8/
Now if you slowly hover-out the gray element on the top, you will get a infinite animation loop, since the element that fly's in is a children of the element that triggers the animation.
Since its not the first time i encounter this difficulty: Is there any pure CSS way to avoid this? (Like children's don't trigger the parents transition) If now, how would you solve it with JS?
Yes there is a pure CSS3 way to do this. The property you need is pointer-events
Adding
nav ul {
pointer-events:none;
}
nav:hover ul {
pointer-events:auto;
}
seems to fix it for me in Chrome 14.
I realize this is a a pretty basic question, and perhaps I'm taking advantage of you all while I should be sifting through some dense css books/materials. But I can't figure out why my code doesn't work.
I'm trying to create two divs on a page, one below the other and it seems like I should be able to give the lower and absolute position which is below the top div.
I've got to div box whose css layouts are all the same but they don't look anything like eachother. Why is it that the second one looks completely unlike the first, why can't I make a "copy" of the first and place it below the first?
Heres the code. the top is the desired scroller is the desired effect. http://jsfiddle.net/7YueC/
Take out the IDs on the divs and/or add the class .same and then switch the #lasteventimg styles to .same. Remove the #2 styles.
Fiddle: http://jsfiddle.net/7YueC/7/
You don't have to use absolute positioning to position one div below another.
Check out this, a jsFiddle I did to demonstrate how to get one div below another.
since you are trying to achieve the exact same effect on both divs and all the contained elements - why not define a class that is applied to each div. div is a block level element, so they will stack on top of one another by default - no absolute positioning needed.
Here is your code, with the addition of the class eventimg and slightly modified CSS http://jsfiddle.net/ZXGUt/
Like mentioned prior if you are duplicating the same effect on two divs, change the styling to a class and use it on both. Secondly an ID cannot start with a number, otherwise the styling will not take affect. Change it to secondEventImage or similar. If you are programming websites, I would suggest using Firefox and plugin Firebug. It allows you to check if the styling is being applied and make quick edits to view how things will be prior to making changes in the code.
CODE - Example
div#two {margin-left: 10%;margin-right: 10%;overflow-x: scroll;overflow-y: hidden;}
div#two ul {list-style: none;height: 100%;width: 8000px;}
div#two ul li{float:left;}
div#two img {width: 200px;float: left;}
OR
div.sameDivs {..........}
div.sameDivs ul {..........}
div.sameDivs ul li {..........}
div.sameDivs img {..........}
<div id="lasteventimg" class="sameDivs"> ....... </div>