Is it possible to affect the parent object on user hover over it's child in just CSS3?
i.e.
<div class="random">
<img src="image.png">
</div>
.random img:hover {
somehow affect .random?
}
I know it's pretty easy to do with JQuery, JS etc. But want to steer away from JS as much as possible.
Using ONLY css is impossible today, but if you want to do simple things, like changing the parent's background when you hover the inner element, you can simulate the background using a sibling. This way you will be able to achieve the result using the "+" selector.
<div class="container">
<span class="content">something</span>
<span class="bg"></span>
</div>
However, to do this, you'll have to work using absolute positioning and deal with it's side effects, like centering things and explicit dimensions, here's an example: http://jsfiddle.net/PYN6P/
Related
I've tried several remedies after searching here but can't seem to make this work.
2 separate divs: 1 div with 4 image links in separate columns (each has a CSS fade rollover effect), and one div underneath with a simple line of text in a full-width column. I'm trying to hide the text div and reveal it upon triangle image rollover.
Here's a link with the images and the first text blurb shown below: http://goodsouldesign.com/redmont
<div id="triangles>
<a>image1</a>
<a>image2</a>
<a>image3</a>
<a>image4</a>
</div>
<div id="blurb1>Text here</div>
<div id="blurb2>Text here</div>
<div id="blurb3>Text here</div>
<div id="blurb4>Text here</div>
Any ideas are appreciated!
Now that I know exactly how you have it laid out, I'm writing a new answer. While you may need the blurbs to span the full width, they are still very close to the elements, which means they could be made into siblings. Take this for example:
<div id="wrapper">
<a id="tri1"></a>
<a id="tri2"></a>
<a id="tri3"></a>
<a id="tri4"></a>
<div id="blurbs">
<div id="blurb1">Text here 1</div>
<div id="blurb2">Text here 2</div>
<div id="blurb3">Text here 3</div>
<div id="blurb4">Text here 4</div>
</div>
</div>
The blurbs are now a child of the blurbs container, which in turn is a sibling of the triangles. This would allow you to use the css sibling selector ~ to access them.
Alternatively, you don't even need the blurbs container.. It might make styling a little easier, but you could accomplish this layout simply by having the blurbs be block elements, whilst the triangles are display: inline-block;. This would put all the triangles on the same line, and bump a blurb down below it. Give it 100% width, and it should be what you want.
Here's a fiddle that shows how to do this with no container, and the sibling selector:
#wrapper #tri1:hover ~ #blurb1 { display: block; }
http://jsfiddle.net/cJJtc/1/
Hope that helps!
UPDATE:
I realized that my answer might have been a bit to quick to dismiss what you were doing.. I assumed that you had the text blurbs in a different area than the triangles which would make this impossible... However, if the text is meant to be right underneath the images or some similar layout, you can move the blurbs to be inside of the triangles wrapper, underneath their corresponding triangle image, and then use an adjacent css selector (exactly like the example you posted in the comments) to hide and show them. Let me know if you need an example.
Pure CSS cannot be used to create an effect such as this. The reason for this is that CSS is sequential, and can only be applied in an inward and onward fashion.. Basically, a CSS selector can only apply to an element, it's siblings which come after it, or it's children. Selecting parent elements, or elements outside of an element's "family" is not something that CSS should be used for.
An effect like this would typically be done with Javascript, which has much more power of selection.
For example:
document.getElementById('tri1').onmouseover=function(){
document.getElementById('blurb1').style.display = "block";
};
document.getElementById('tri1').onmouseout=function(){
document.getElementById('blurb1').style.display = "none";
};
See this fiddle for a full example:
http://jsfiddle.net/tQjd4/
(I'm not expert on javascript, so I'm sure there are more efficient ways to do it, but that works!)
I tend to use jQuery to shortcut my javascript, which would be something like:
$('#triangles a').hover(function(){
$('#'+$(this).attr('rel')).css('display','block');
}, function(){
$('#'+$(this).attr('rel')).css('display','none');
});
assuming that you've given each triangle a rel attr equivalent to the blurb text id
Is there any way to have a custom-shape image container? To use something instead of <div />?
The problem appears when I need to add corners on top of the #content-box ( http://img855.imageshack.us/img855/8343/screenshot20111027at163.png ). The corner-images are using only half of the block element, the rest (the pink alpha-background) are blocking the active-elements underneath it.
Is there any workaround for this?
To answer my own questions:
It is not possible to have a custom shape HTML element without parent block element holding it anyway, e.g. in case of SVG.
However, the one workaround that I've managed to come across is magic CSS pointer-events rule, which, as you might have guessed already, helps to click through the element.
pointer-events: none;
That did solve my issue.
It's not possible to have custom shaped containers. You could do this though using <div> wrappers, each containing a different background image. For example:
html
<div id="content-wrapper">
<div id="content-box">
<!-- Upload photo content box --->
</div>
</div>
css
#content-wrapper,
#content-box{
width:500px;
height:500px;
}
#content-wrapper{background:url('images/four-corners.png') no-repeat}
#content-box{background:url('images/octagon.png') no-repeat}
This way the images won't block any active elements on the page.
Ok, so I'm working on a prototype of my UI before I start coding the webapp. I got the design mostly done while working in Firefox and (of course) when I tested it in IE, there were a lot of rendering issues. One of those issues is that if I have a div that contains some text and another div that's set to float:right, that nested div shows up on the next line, below its parent div. This is the problem markup in its simplest form...
<div style="background-color:red;">
Text
<div style="background-color:yellow; float:right;">Right</div>
</div>
I scoured the internet for solutions and the only working relevant solution I found that makes this work in IE is to place the floating div at the beginning of its parent like this...
<div style="background-color:red;">
<div style="background-color:yellow; float:right;">Right</div>
Text
</div>
In reality, the nested div has a class and my CSS is floating that class. But what happens if I eventually make another stylesheet to target mobile devices and I no longer want that inner div to be floated? Then the content itself would be out of order in HTML, just for the sake of accommodating a CSS issue in IE. Is there a better way to solve this?
A colleague of mine recently had a very similar problem. I recommended simply using positioning rather than floating. I believe you could do the same here:
<div style="background-color:red; position:relative;">
Text
<div style="background-color:yellow; position:absolute; right:0; top:0;">Right</div>
</div>
I don't know if you have a requirement to use floats or not. Using the positioning method will cause the positioned element to not take up space in normal flow, but otherwise keep the correct source order and visually accomplish what I think you want to do.
Set a width value on your inner div and make it display: inline-block. Div's are block elements that take 100% width of the parent, that's why IE puts it on the next line.
I am not sure if it is a possibility for you, but putting the text within the outer div in a div of its own seems to solve the problem
<div style="background-color:red;">
<div style="float: left;">Text</div>
<div style="background-color:yellow; float:right;">Right</div>
</div>
I just hit this problem in IE7 - in my case, the item that was going to clear the float was going to be full width anyway. I just set that to "float: none;clear: left" and it seems to work.
http://dev.dealercontrol.net/dealercontrol/index_comp1.html
on this page I am trying to float a flag to the left of the subtitle
<div>
<div class="flag certified">Certified</div>
<div class="subtitle left">Deal On 09 Black Lamborghini LP560</div>
</div>
I can't seem to get the flag to layout properly what would be the best method to do so? also how can I set the height of the flag to wrap tight on the text inside of it?
Good lord man.
You have soooooo much CSS going on on that page it's no wonder you're tying yourself in knots. Just look at the huge stack of inherited and overridden styles on any element with firebug.
First off a simple float:left will do the trick but it will only work if the two elements have a combined width narrower than their parent container - otherwise what else can happen but it wraps?
Secondly, your code above isn't actually what's on the page. Too many container divs getting in the way - simplify and move the two required elements as sibling nodes of the same parent and give both float:left.
Thirdly, reduce your bloat! .clear classes are pure bloat (see here). You really don't need more than 2 CSS files (a global base and a page extension) so condense and merge your files. Cut out as much of the tag selector styles as you can (this is what creates all the inherited/ignored stacks which are getting you into an unmaintainable hard to decipher position). Hopefully at that point you have a working design and a lighter more responsive page you can debug more easily in future.
Put the flag inside the div and float it to the left
<div>
<div class="subtitle left">
<div class="flag certified" style="float: right">Certified</div>
Deal On 09 Black Lamborghini LP560
</div>
</div>
I was using jQuery plugins to create a rounded corner for my <li>, but it was not working on a lot of browsers and didn't support mouse over.
I am wondering what is the best way to use two images (left corner and right corner) as the left and right side with using <li>.
The construct that I have seen used most for that is a span inside a link.
so something like:
<li><a><span>Your text here</span></a></li>
you can then target the span and the link using the hover state of the link:
a:hover{some rules here}
a:hover span{some more rules here}
that keeps it kinda semantic, and doesn't add to much junk to the page.
You could put Divs inside your li's like so:
<li>
<div class="lefcorner"></div>
<div class='liContent'>Foo</div>
<div class='rightcorner'></div>
</li>
That way you will both keep your semantics and will also have the cross-browser support of styling DIVs.