On a div item I have a expanding hover effect so it gets higher, wider and a shadow give it a z-index of 1 so it appears over other div items.
In that div I am using a tool tip (tipso). This only is visible when I give it a z-index of 2 (or greater) but when I (accidentally) hover over the tool tip bubble the expanding hover effect from the div disappears.
Very logical of course because the tool tip bubble has a higher z-index.
I tried to give the tool tip a z-index of 1 but then it is not showing at all.
Any thoughts?
I don't know exactly how you're doing it - js or css.
But to achieve that behaviour probably you're gonna have to use javascript.
If the tooltip is located inside the div mouseenter and mouseleave events may be your best solution.
Related
RighteousAlliance.com - two buttons on the right with mouseover effects. (i'll fix their actual position later)
If you adjust the browser width by dragging it you notice how they stay in the same position relative to the background? That's what I want.
But there's something invisible outside the images that are overlapping and ruining the mouseover effect. If you hover vertically over "shop" you notice how it only lights up ABOVE the top part of "Learn" to the right?
What is blocking that?? There's something invisible outside the div. I've tried for 3 days to figure this out.
I can fix that problem by adding "display: inline-block" and something else. BUT THEN IT BREAKS THE ALIGNMENT WITH THE BACKGROUND when you adjust the browser size horizontally. How do I get BOTH to work? Please help. I did it a long time ago but can't figure it out.
Here's a screenshot of the code: https://righteousalliance.com/Images/code.png
I have an element (the green color in image)
it has a property
top:-5vw;
Because of this it covers the link in text (1.5% /year) and makes it unclickable.
How do I make it clickable without replacing anything?
I tried using z-index, but that does not work.
Image is of inspect element, so blue colour is region of 2nd element
You can try to use pointer-events: none; on div or use negative z-index like z-index:-1.
z-index is what you are looking for. Z-index has certain things that stop it from acting the way you want it to. common mistakes are setting the position. make sure your positions are not set to static or absolute
I have a chat box that is resizable. It has
resize:both;overflow:auto
in the CSS. So at the bottom right of the div, there is a little arrow thing that you can click on and resize the div.
Is there another way to style this? I'd much rather be able to put the mouse on any corner of the div and resize it, or at least have that arrow be on the top right or top left of the div. I'd also like to be able to change what the arrow looks like, to make it more obvious what it does.
Also, is it possible to have the cursor change when the mouse is over the arrow?
Short answer: this is not possible.
However using javascript and CSS a custom solution can be made. You can place a little div in a corner using absolute positioning. Then have javascript resize the textbox on dragging the little div.
I have two different elements (div class="") within a larger container.
Let's call them div class="overlay_container" and div class="title." The div class="overlay_container" has a subclass, .image, which creates an overlay over the entire larger container on hover.
The div class="title" has a z-index of 10,000 and lies over .image and therefore over the overlay. Unfortunately, when you hover over "title," the subclass overlay image underneath disappears.
I know the problem is obviously that the "title" div is right over the other divs and therefore the on hover will disappear due to the z-index. But how do I fix this? How do I make it so that when you hover over the "title," the .image overlay still appears?
If your answer involves jQuery, could you please tell me where to put the script (before the /head tag)? Thanks!
Adding pointer-events:none; to the title div might work?
Looks like most browsers recognise it, except for....dun dun dun...IE: http://caniuse.com/#search=pointer-events
I'm making a menu with <ul>/<li> and CSS.
Here's what I have so far: https://jsfiddle.net/gANfS/6/
The problem is that if you mouse over the top edge within the 5 pixel margin, it starts getting crazy and going back and forth between the hover and unhovered state because the size of the block grows and shrinks. How can I fix this? When I shrink the li, I don't want to be shrinking the hover area. That would fix it, but I'm not sure how to pull it off. Ideas?
this is a hack job...but it will work
instead of magin-top:5px;
do border-top:5px solid black;
if you want your background to to be a different color, just make sure to set the border color to the same color.
Wrap your li content into a div, then apply your shrinking to that div (.sel div:hover instead of li:hover) and this should make it.
The reason for that is on mouse over, the button moves down and sets a margin-top 5px. Then, if the mouse is over that top edge, the button no longer has "hover" state and it retracts back. When it does get back, it switches to mouse over state and the journey begins again.
You could use padding-top:5px instead of margin-top and set the HOVER effect on the whole container. Padding, as opposed to margin, is space inside the element. That way, when the mouse is over the top edge, it would still be considered as over the element and it will not flicker anymore.