I have a page where I have a div that is positioned over another div. The top div is set to be transparent in most places, and not capturing pointer events. I know IE 9 and 10 don't support the CSS pointer-events property, but I'm seeing some odd behavior in IE 9 and 10 when the underlying div doesn't have any content. In those cases, it doesn't grab the mouse events at all. If there's a border or some text content hovering over the border or content does work, but not in the blank spaces of the element. I've tried using the transparent background image, but that doesn't seem to work. I've attached the link to the bare-bones fiddle that reproduces the problem.
HTML:
<div class="topElement"></div>
<div class="bottomElement">Works in IE 9 and 10 only if you hover over text or border.</div>
CSS:
.topElement {
position:absolute;
width: 100%;
height: 100%;
background: transparent;
pointer-events: none;
z-index: 2;
}
.bottomElement {
position:absolute;
width: 100%;
height: 100%;
border: 3px solid black;
background: transparent 0 0 repeat scroll url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBR??AA7");
}
.bottomElement:hover {
background-color: red;
}
http://jsfiddle.net/MLundin617/jpr3j8jb/4/
The area should turn red when you hover over it.
You must write z-index to ".bottomElement" >=2
Related
This question already has answers here:
Thick underline behind text
(7 answers)
Is it possible to have two background colors for a single html element? [duplicate]
(3 answers)
Closed 2 years ago.
trying to build a button (or text box) that looks and works as follow:
Top half button background white or transparent, bottom half of button background solid color. Upon hover the orange should change to blue (hover color I can do).
Color should be behind text. Text should not change color, only the 'bar'.
the sample button
Have tried:
Bottom border only (+-10px thick + color), white button background - but cannot seem to set a negative value on the border so that the text are in front of color.
Used Ultimate CSS Gradient Generator and manipulated the gradient to solid and it worked on the site, but I don't feel that this is sustainable (too much code for a simple function).
Please help.
I've used absolute positioned psuedo elements to achieve your desired result
ps:
The ::before element isn't necessary if you want it transparent but if you want 2 colors you can use it
button {
background: none;
border: none;
position: relative;
}
button span {
position: relative;
z-index: 2;
}
button::before,
button::after {
content: "";
position: absolute;
left: 0;
height: 50%;
width: 100%;
}
button::before {
top: 0;
background-color: transparent;
}
button::after {
bottom: 0;
background-color: orange;
}
button:hover::after {
background-color: blue;
}
<button>
<span>BUTTON</span>
</button>
Make use of a trick available with gradients: specify where the first color ends and where the second color starts. I used 8px and 9px to give a simple demonstration. To get the hover effect, override the color in the gradient definition:
button {
border: none;
background: linear-gradient(to bottom, transparent 8px, orange 9px);
}
button:hover {
background: linear-gradient(to bottom, transparent 8px, blue 9px);
}
<button>Button</button>
I'm trying to make a custom tooltip implementation in CSS, which is working pretty decently, but I'm running into a problem. Currently, hovering over the tooltip still keeps the tooltip opened, even though I'm not hovering over the original element itself.
Of course I've tried something like ::before:hover {display:none;}, but that doesn't work because pseudo-elements don't get pseudo-classes applied to them.
My next thought was to simply make the tooltip not "take up" any space. Using negative margin-bottom allows other stuff to take up space in an element as if the element is not there. However, the :hover pseudo-class apparently still applies then.
Here's a demo of what I'd like to do. I'd like to have the tooltip of the following demo not persist any hovering state. Note that moving the tooltip-text higher above the element is not a working solution, because moving the cursor upwards faster than a snail's pace will cause some pixels to be skipped, which means the tooltip 'catches' the cursor and persists the :hover on the element.
[data-tooltip] {
position: relative;
cursor: default;
}
[data-tooltip]:hover::before {
content: attr(data-tooltip);
position: absolute;
top: -2px;
transform: translateY(-100%);
background: white;
border: 1px solid black;
}
<p>Spacer text</p>
<div data-tooltip="Example tooltip">Hover over me for a tooltip text</div>
As you can see, if you move your cursor over the div, the tooltip will appear, and if you slowly move your cursor up, the tooltip will disappear. If you move your cursor upwards slightly faster, however, it'll skip the 1-pixel gap, and keep the cursor hovering over the div.
Now I'm looking for some styles to apply to [data-tooltip]::before so that the cursor's hover events are not triggered on it (or at least, not at the location you see the tooltip; if I can hide it somewhere at [-1000, -1000] that's fine as well)
So basically, my question is, is it possible to apply css to an element so that :hover does not apply to (part of) an element? I'd love to hear ideas or suggestions.
Not sure if that's what you're looking for, but regarding the first question (red div, blue on hover), you could shorten the divs height and use border-bottom for making up for the lost height:
div {
width: 100px;
height: 50px; /* instead of 100px */
background: red;
margin-bottom: -50px;
position: relative;
z-index: 1;
border-bottom: 50px solid red; /* adds 50px to divs apparent height, but ignored at hover */
}
After looking around the internet for a while I finally found a solution that works flawlessly. I didn't really know about this before, but apparently there's a pointer-events style that does exactly what I want. Its accepted values outside of SVG are auto and none, but luckily the latter prevents all hover-events from triggering on the ::before pseudo-element.
Here's a demo:
[data-tooltip] {
position: relative;
cursor: default;
}
[data-tooltip]:hover::before {
/*** this style prevents persistence of the tooltip when hovering over it ***/
pointer-events: none;
/* the rest is just the styles used in the question */
content: attr(data-tooltip);
position: absolute;
top: 0; /* changed from -2px to 0 so the effect is more clearly shown */
transform: translateY(-100%);
background: white;
border: 1px solid black;
}
<p>Spacer text</p>
<div data-tooltip="Example tooltip">Hover over me for a tooltip text</div>
Using the tips found here, I successfully achieved a "slanted" div by placing a triangle overtop of an colored rectangle, however I am experiencing some strange artifacts (see below).
Notice the thin line above the colored section - it is as if the triangle is placed too low. I often use 10vh or 10%, which could introduce rounding errors with non-divisible screen/div heights, but that is speculation.
What causes this issue, and what can I do to fix it?
Triangle CSS
& {
width: 0;
height: 0;
border-style: none;
}
#container {
width: 100%;
position: absolute;
z-index: 1;
}
#top-left {
border-right: 100vw solid transparent;
}
#top-right {
border-left: 100vw solid transparent;
}
#bottom-left {
border-right: 100vw solid transparent;
}
#bottom-right {
border-left: 100vw solid transparent;
}
When I create a triangle, I specify either the border-top or border-bottom, with a corresponding negative margin. In the case above, the height was 50px:
<div id = {{attr.direction}} style = "border-top: {{attr.height}} solid {{attr.color}}"></div>
<div id = {{attr.direction}} style = "border-bottom: {{attr.height}} solid {{attr.color}}; margin-top: -{{attr.height}}"></div>
JSFiddle
It can be observed in this JSFiddle, not by resizing the view pane but by choosing a responsive view in developer options, and changing the screen size. To do this in chrome, right click > Inspect > Responsive (from drop down). This is not merely a glitch in the developer options, however, as it is observed on real mobile devices. Notice the thin red outline in the image below.
I am making a website and I have got a background of light blue, then on top of that I have a white transparent rectangle. Then all in there I have a div where my actual information is going to be, laid out like this
<div id = "transparent">
<div id = "yourinfo">
<div id = "profileinfo">
<span id = "yourname"> Name </span>
<br>
<span> View </span>
</div>
</div>
</div>
However when I try and give a background colour to my main page above the transparent rectangle, this element is also transparent, how do I remove this transparency and get this element to appear as if on top of the transparent rectangle?
Here is my css for these elements
div#transparent{
margin: 40px 40px auto;
margin-top:0px;
height: 620px;
background-color: white;
opacity:.3;
padding: 20px;
}
div#yourinfo{
width: 350px;
height: 250px;
background-color: red;
border: 1px solid gray;
opacity:1;
-webkit-border-radius: 15px;
padding:10px;
}
The CSS opacity applies to children elements. To accomplish what you wish you will have to use the rgba (RGB plus Alpha/Transparency channel) on your background-color declaration.
Such as:
#transparent {
background-color: rgba(255,255,255,0.3)
}
Be aware that this approach does not work with IE8<, so you might have to look for a workaround. Either you use a transparent .png (like in the olden days) or you use some conditional stylesheet and the Microsoft Internet Explorer proprietary syntax.
Also, obviously, this approach will only work if you don't want #transparent to have semi-transparent text; all text will be 100% opaque in that div. Accordingly, you can use the same CSS3 syntax on the text color.
i'll have a try on my first question.
This is a problem, I had a few times, but don't exactly know, how to solve it:
I have a semitransparent background image (e.g. transparent rounded corners) which also as a gradient background color.
(In this example it's a button for a dropdown navigation: When you hover the button, nav-list appears.)
Here's the code:
<div id="top-navi"><a id="top-navi-button" href="#" >Navigation</a>
<ul>
<li><a href='#'>bla</a></li>
<li><a href='#'>blubb</a></li>
</ul>
</div>
CSS:
#top-navi {
position: fixed;
top: 0px;
left: 6%;
z-index: 1000;
}
#top-navi a#top-navi-button {
float: left;
width: 130px;
height: 20px;
padding: 5px 10px 5px 20px;
background: url(../img/top-navi-button.png) no-repeat;
color: #FFF;
font-size: 120%;
text-decoration: none;
}
#top-navi a#top-navi-button:hover,
#top-navi a#top-navi-button:focus {
text-decoration: underline;
}
The text on the button is white.
Because i want to make the site accessible, I don't put the text on the image, but write it in html (so screenreaders can read it) and style it white.
This works pretty well until here.
Now, I want to make it even more accessible, so you can use all functionality, even if images are deactivated. If I do this (e.g. with FF developer toolbar) the background image disappears and you can't see the white text anymore.
Now, if I give the link a background-color (in addiotion to the image) it laps over the transparent corners.
I also tried to put the text in a <span> and give it a background color, but as my image has a gradient, you see the background-color of the span then.
Any ideas how to solve that?
Thank you very much in advance!
Chris
You need an extra image for the non-transparent gradient part of the image. When you add the span to the link you can style the span to have the solid background and a fallback color.
+------------------------------------------------+
| a: Gradient and shadow |
| +---------------------------------------------+|
| | a > span: Solid gradient + background color ||
| +---------------------------------------------+|
+------------------------------------------------+
So, HTML:
<a id="top-navi-button" href="#"><span>Navigation</span></a>
And CSS something like:
a#top-navi-button {
background: url(top-navi-button.png) no-repeat;
}
a#top-navi-button span {
background: url(top-navi-solid_gradient.png) #00F;
}
Please note that if you want to create an accessible site you should also consider offering keyboard navigation. Right now you can't use the Tab key to select any of the menu items.