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.
Related
In my AngualrJS application we use angular-ui-bootstrap tooltips.
I have one tooltip that needs to accommodate long text.
The answer to SO question Displaying long text in Bootstrap tooltip shows me how to make tooltips go wider...
... but what if I don't want to make all tooltips wider, just one specific tooltip?
(Notes: AngularJS 1.2.24, jQuery available... but I'd rather just be able to apply a style to that single tooltip than get more complicated)
If on the other hand you have tooltip-append-to-body="true", you can use the following modified version of #Daryn's code
CSS
.tooltip-400max .tooltip-inner {
max-width: 400px;
}
HTML
<div id="element1"
tooltip-append-to-body="true"
tooltip-class="tooltip-400max"
tooltip="{{ model.longTooltip }}">Text</div>
<div>More page content</div>
As long as you don't have tooltip-append-to-body="true", you can use the following CSS (in this example, making the tooltip max width 400px):
CSS
.tooltip-400max + .tooltip .tooltip-inner {
max-width: 400px;
}
HTML
<div id="element1"
class="tooltip-400max"
tooltip="{{ model.longTooltip }}">Text</div>
<div>More page content</div>
The key in the CSS above is the adjacent sibling selector, +.
That's because, as you probably know, when you hover over element1, the tooltip is inserted as a div after element1, approximately like this:
<div id="element1"
class="tooltip-400max"
tooltip="{{ model.longTooltip }}">Text</div>
<div class="tooltip fade in" and other stuff>...</div>
<div>More page content</div>
Thus the CSS selector .tooltip-400max + .tooltip will select only this inserted tooltip, which is an adjacent sibiling. The descendant .tooltip-inner max-width styling will not affect all tooltips, only tooltips for elements with tooltip-400max class.
Is this possible? I've got
<div class="one">
<a><img src="http://lorempixel.com/100/100"></a>
</div>
I want it so on hover of the div (or <a>) the new hover:background color/image covers the <img>, kind of like the z-index of the hover changes.
So in this fiddle on hover of the <div> or <a> the 100px img wouldn't be visible, everything would be gold.
http://jsfiddle.net/q9Fm3/2/
I'd like to keep the inline <img> element.
A background image can't be on top of an image in the same element, but you can simulate what you want by adding:
.one:hover img {
display:none;
}
jsFiddle example
Just add this rule:
.one:hover img {display:none;}
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.
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.
Can i change parent class of some dom object on hover event via CSS selectors?
For example I have such block:
<span class="wBlock" >
<span class="wText">Text</span>
<span class="wLink"/>
<\/span>
and if i move mouse to span "wLink" span "wBlock" must be changed, and if i move out than it must be the same as at the begining
.wLink{
padding-right:15px;
background:url(/img/addlink.png) center right no-repeat;
cursor:pointer;
}
.wText{
background-color: #1BE968;
}
It's something like this alt text http://img192.imageshack.us/img192/5718/capturehlk.jpg and if i move my cursor to plus text highlight must be changed to yellow
I belive you can't do that in CSS.
I would advise to restructure your HTML so you dont end up using JS hacks to apply styles.