Using trick from here: Making the clickable area of in-line links bigger without affecting the layout, I set positive padding and negative margin on an anchor element, with the goal of extending the clickable region into some text beyond the element.
It works, but only if opacity is some value below 1! Firefox and Chrome exhibit the same behavior.
Compact demo: http://jsfiddle.net/zGsZK/8/
CSS:
a { margin-right:-250px; padding-right:250px }
.nowork { opacity:1 }
.works { opacity:0.999999 }
HTML:
<body>
<a href=# class=nowork>?</a> this black text is not clickable :(
<p>
<a href=# class=works>!</a> this black text is clickable, as it should be
</body>
Is this how it's supposed to work? Why? Is there a way to make it work when opacity==1?
I'm really not sure why this works, but if you add position:relative; to the nowork class, the clickable area will appear above the text similar to the works class. I believe this has something to do with how browsers render CSS, and since the <p> tag is rendered after the anchor, its native CSS (where cursor:normal; rather than cursor:pointer;) takes priority.
Related
I'm working with an object in WordPress, a block with a picture background and a white border, and a text block inside it that doesn't fill the full picture space, like it has padding, but there is no padding being used. The background of the object has an overlay transparency setting that I have at 50%. The customer asked me to have a hover make the opacity change to 20% and to lose the white border. I was able to do that with the class of the "uagfb-section__overlay" class.
The text block is smaller in the center of that div, in the next div "uagfb-section__inner-wrap" and when you hover over that, the opacity of the photo goes back to 50%. If the cursor is outside that text div, but inside the overlay div, the opacity is at 20%. Is there a way to have the overlay class maintain an opacity change regardless of the hover over the text block which is in the center?
I have looked at other CSS selectors like >, +, and ~ but they don't relate to what I need. It seems it would be nice if there was a selector that affected a parent based on a child's behavior like a < but that doesn't exist.
The HTML...
<div class="wp-block-column">
<section class="wp-block-uagb-section uagb-section__wrap uagb-section__background-image uagb-block-1695edec-a8de-49d4-8758-1ac29736dab0 cause-section-block">
<div class="uagb-section__overlay"></div>
<div class="uagb-section__inner-wrap">
<p style="color:#ffffff" class="has-text-color has-text-align-center has-regular-font-size">Promoting Wellness</p>
</div>
</section>
</div>
My CSS to trigger the opacity change...
.cause-section-block .uagb-section__overlay:hover {
opacity: 0.2;
}
Perhaps the css property :
pointer-events: none;
in the uagb-section__inner-wrap css class could do the job.
More info on : https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
I have the following structure:
<li class="myclass" ng-class="myAngularClass">
<div> div1
<div> div2
</div>
</div>
</li>
The element li is of dynamic height and width. "myAngularClass" has a property background-color: green.
The background color is spanning the whole li, which covers all the divs in it. But i want the width of the background-color to be only 10% so that it spans only until div1. I have seen This link, but i dont have much flexibility for adding other tags. "myAngularClass" returns a string that evaluates to a class name and i wrote the background-color property in that class name so that the li has the proper background color.
In short, i'm looking for a way to have a back ground color(such as background-color-width) for an element but only to a certain length.
Please let me know if this is possible
You have no control over the background-color attribute but you can control gradients widths, so you can create a gradient which in fact is built of only one color:
background: linear-gradient(to right, rgba(0,255,0,1) 0%,rgba(0,255,0,1) 10%,rgba(0,255,0,0) 10%,rgba(0,0,0,0) 100%); /* W3C */
For cross browser support you can use this tool: http://www.colorzilla.com/gradient-editor/#00ff00+0,00ff00+10,000000+100&1+0,1+10,0+11,0+100;Custom
You can also do this using images in the background.
How can I make my css sprite back button validate through W3C? Here is my code to call the button.
<div class="icon-backbtn"></div>
I ended up using the below code to pass W3C validation and still using CSS Sprites.
<a id="icon-backbtn" title="Back" href="#" onclick="history.go(-1)"></a>
You shouldn't have a <div> as a child of an <a>, use an <img src="..."/> instead.
EDIT:
If you have a spritesheet, then simply add display:block; for the anchor and it will behave just like a div.
Since you are using a CSS Sprite, I would suggest placing the <a> inside the <div> (proper way to do it) and add some css:
HTML
<div class="icon-backbtn">
</div>
CSS
.icon-backbtn a {
display:block;
cursor:pointer;
text-decoration:none;
text-indent:-9999px;
}
The CSS sets the link to be a block element, thus occupying the width and height of the div. The remaining styles are to prevent the regular link behavior for texts, since you are using an image.
With regard to the following markup:
<div class="mydiv">
<img src="myimage.gif" />
</div>
The div.mydiv is basically styled to be a pretty rounded edge box around the image specified within the link. Lets say its background-color starts as black.
I would like to make it so that when I :hover over myimage.gif, the style of div.mydiv changes the background-color to, lets say, yellow.
How can I specify the style of div.mydiv when a nested <a> is being hovered over?
Use
.mydiv:hover
{
background-color:yellow;
}
in a CSS file, assuming you have one. I don't think there's a way to do this inline.
I have to create an html page for use on a CD. The navigation is an HTML map with co-ordinates set. When the user rolls over a co-ordinate, I want an image popup to appear beside it. There's 8 map links, and 8 corresponding image popups.
I could do this easily through jQuery, but the CD will be used on IE mainly. IE doesn't allow javascript to be run locally (without user interaction, which isn't acceptable).
Through jQuery I absolutely positioned the rollover images, but I can't set them visible through CSS with a hover. What's the best method to approach this?
You could always try some serious styling effects based on the Pseudo-class of :hover.
Without knowing your markup I would tackle along these lines...
HTML Markup
<div id="mapWrapper">
<ul id="map">
<li id="location-01"><span>Map Text</span> <div class="item">Additional Pop Up Text</div></li>
<li id="location-02"><span>Map Text</span> <div class="item">Additional Pop Up Text</div></li>
<li id="location-03"><span>Map Text</span> <div class="item">Additional Pop Up Text</div></li>
....
</ul>
</div>
CSS Code
#mapWrapper {position:relative;} /* include width, height and any bg imagery */
ul#map, #map li {margin:0;padding:0;list-style-type:none} /* just to reset the list to be standard in different browsers */
#location-01 {position:absolute;} /* include with, height and position top-left items as required */
#location-02 {position:absolute;} /* include with, height and position top-left items as required */
etc...
#map li .item {display:none; } /* hide the pop up text, include defaults for position based on the location of the li */
#map li:hover .item {display:block;} /* show the pop up text on hover of the LI*/
/* Note: If you need to position each pop item uniquely you could use something like... If you do, remember to move the :hover effect to be the last item in your style sheet */
#map li#location-01 .item {display:none; }
Hope that helps you out, I have had to a similar map online (not with a CD) but wanted to do it without JS and that was the easiest way to do so.
Note: If you need to offer IE6 support, you would probably be best changing the hover to be based on an ahref instead.
eg: Map Text Additional Pop Up Text