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;}
Related
I'm creating an application that edits the formatting of any webpage. I'm trying to change the background color of all the child divs of a selected div, but my current code makes images within the divs disappear.
.blah *:not(img) {
background-color: #fffdd0 !important;
}
I tried using :not() to make the formatting not apply to images, but it didn't change anything. Is there a way to make the background color not apply to images or not hide images?
i think your imgs are not children but they are grandchildren of your .blahdiv . that's why your code is not working. and so the parent of the img ( .child in my case ) gets the background and so a background appears under the image although the image doesn't get the background-color style
you could try something like this ( don't know your HTML structure or how complex it is )
div *:not(.child) { background-color: #fffdd0 !important;}
.parent > .child *:not(img){ background-color: red !important;}
<div class="parent">
<p>Child Text</p>
<h1>Child Heading</h1>
<div class="child">
<img src="http://placehold.it/350x150">
<p>grandChild Text</p>
</div>
</div>
See JSFIDDLE here.
As the parent-parent node of pink div, the blue div included the css style overflow:hidden, which is essential in my project for other parts of content.
But now I have to show the pink square across the border, it seems a part of it was overlapped because of it parent's overflow:hidden. What should I do if I want to make it?
Thanks!
This is not possible. If you declare overflow:hidden on an element, all child elements have to obey this rule.
What you can do is to move the box out and position it accordingly:
<div class="paper">
<div class="container">
</div>
<div class="box">
</div>
</div>
Remove to you parent class .papaer overflow:hidden and
add this css
.paper:after{
content:'';
overflow:hidden;
display:table;
}
Demo
if i was to have the following HTML:
<div>
<div>
<div>
<div>
"I want to access this div and change the background colour on a hover"
</div>
</div>
</div>
</div>
how do i access the top level div to apply styles to it without affecting the parent divs?
NB - it is for a general system where div's are dynamically generated, therefore adding a class or id is not a solution to this particular problem.
The answer is you're out of luck.
There is no CSS3 selector for "an element that does not contain child elements, only text".
If the div is directly inside <body> just doing this is fine:
div {
/* Styles */
}
If it's not, give it an ID (if there's only one of these such divs) or a class if there are multiple:
<div id="foo">
<div>
<div>
<div>
"I want to access this div and change the background colour on a hover"
</div>
</div>
</div>
</div>
Then select it like:
div#foo {
/* Styles */
}
You haven't given any context in your OP, so this is a general solution.
To change the background colour of the 4th div, when hovering over the 1st div:
div:hover div div div {
background-color: #some_color;
}
What i came up was undoing everything you to do the first div to the last div generated. Here is a jsFiddle thing you can play around with: http://jsfiddle.net/ns6PS/
HTML:
<div> <div> <div> <div>
"I want to access this div and change the background colour on a hover"
</div> </div> </div> </div>
css:
div { background-color: #ddd; }
div div div div { background-color: #fff; }
correct me if i am wrong.
$('div').on('mouseover.mainfunction', function() {
return false;
});
Will cause the event to only shoot on the topmost div
so... div:hover will only apply to that div.
That's the jQuery version.
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 want the outer div to span to all the page width with the background color #efefef.
The inner div will be centered and have white background with 995px width.
So i have this code:
<div style="background-color:#efefef;width:100%;">
<div id="photoUploadWrap">
Now the photoUploadWrap style is:
#photoUploadWrap{width: 995px;margin: auto;}
And it has tables and more divs inside it. The div gets centered alright but the
outer div doesn't display the #efefef background.
What's wrong here? I also tried to put a border on the outer div with no success.
The outer div has no height (or at least the browser doesn't think so). This is why you don't see the border or the background color. Why not just set the background color on the body tag?
Not sure why this isnt working, but when I changed it to:
<div id="divContainer">
<div id="photoUploadWrap">
aaaa
</div>
</div>
#photoUploadWrap{width: 995px;margin: 0 auto;}
#divContainer { width: 100%; background-color: #efefef; }
it worked.
check it Live