I have several pseudo elements that are related to varying different parent divs. All these divs have different background colors and I would like to before and after pseudo elements to inherit the background color of the parent div. I also want to do this without using JS and only CSS. I tried setting the background of the before and after elements to inherit, but they just show up transparent.
You can use background: inherit on the pseudo-elements:
#mydiv:after {
background: inherit;
}
jsFiddle Demo
Related
This is what I tried.
CSS:
div#Layer3:hover div#Layer3copy
{
display: inline-block;
}
HTML:
<div id="Layer3"><img src="images/Layer3.png">
<div id="Layer3copy"><img src="images/Layer3copy.png"></div>
</div>
I want this div to be hidden and when hover another div it appear, however, its working OK,
But moved a little bit from it actual place,
is there a solution for it?
Alright, first you need to know display,position and pseudo state properties of CSS
in your snippet #Layer3 is wrapping #Layer3copy so we can invoke it on hover state by using direct child selector i.e
#Layer3:hover > #Layer3copy{
/*Do your things here*/
}
working example: https://jsfiddle.net/ishusupah/eupfr101/
In this example as you wanted i am using #Layer3copy display:none and on hover state i am making it display:block.
you can display and position however you want.
You are not hiding/showing any div. What you are actually doing in the code above is when Layer3 div is hovered on, you are changing Layer3copy div style to be inline block - and that's why it is moving. A div is by default a block element - which means it is taking up a full width of a row. When you change it to an inline-block you are "telling" the div to align next to another element if there is enough width in a row, and not take the full width - that's why the div is moving next to the parent div.
You also need to modify your selectors to achieve your requirement.
To actually achieve what you want (hiding and displaying back the Layer3copy without it being moving), use this CSS code:
#Layer3 #Layer3copy{
display: none;
}
#Layer3:hover #Layer3copy{
border: 3px solid red;
display: block;
}
The first selector is giving the default definition when layer3 - the container div is not hovered - in which the child Layer3copy div is not displayed (display:none).
The second selector is saying when layer3 is hovered apply styling to Layer3copy and turn it to display:block - which is the default display for divs (they are block elements) - this it is getting displayed and staying it its initial position without "movement".
Here is a working example with the above code.
I've additionally added a thin red border to the inner div, so you'll see what i mean in a block element - which is taking the entire width of a row.
try using this
#Layer3:hover > #Layer3Copy {
position: absolute;
display: inline-block;
/** Postion of your div **/
}
Try to adjust the position until it is placed wherever you want it to be in.
I think you want to be like a tooltip or something
I have a simple span on my page with a class eah-logo-img, and inside of my CSS, I have tried to set the background image for it. However, It is not working for some reason.
This is my HTML:
<span class="eah-logo-img"></span>
and this is my CSS:
.eah-logo-img{
width: 150px;
height: 150px;
vertical-align: middle;
background: url('img/logo_def_white.gif');
background-size: auto;
}
My image is inside of the img folder (inside the same folder as the CSS; so it should be working.).
I have made sure the name is right, and I have checked Chrome inspect element and made sure the link is correct.
I am unsure why this isn't working.
Cheers.
Your span element has no actual width or height – and therefor you do see little of any background, because it is displayed in an area that is 0*0 pixels big.
width and height by definition have no effect on inline elements (which span is by default.)
So add display:inline-block or display:block to your span, or float it, or position it absolutely – so that width and height are allowed to have an effect.
In your css add
display:block
or
display:inline-block
better yet do not use span if you want to define the width and height, use div instead.
I'm using a css drop shadow technique found here:
http://nicolasgallagher.com/css-drop-shadows-without-images/demo/
It uses the psuedo classes, before and after, to give more shape to your shadows. The problem is that I can't get the shadow to display over other elements.
Here is jsfiddle: http://jsfiddle.net/S7dzj/6/
I have tried various relative positioning of the div's with different z-indexes.
I have also tried to move the header element within the top div, no help.
I have also tried moving the top div relatively top: -5px to make it go underneath the header div but still no shadow.
Is there a way to accomplish this?
The z-index property only applies to elements which are not position: static, so your .top class was merely ignoring that property.
Your .header and .top classes both had the same z-index, so the header was appearing on top.
See the updated jsFiddle. All I did was add position: relative (which doesn't visually do anything on its own) to .top and change it's z-index to -2.
If you want the shadow to overlap .top, then see animuson`s answer.
If not, see http://jsfiddle.net/S7dzj/8/
.drop-shadow{
margin-bottom:10px;
}
If you add margins, you wil see the shadow.
I have an CSS3 animation which enlarges a div box.
This div contains an child element "p"-tag. When I set the animation class on the div box, the p tag inherits the animation. But I want to run the animation only on the parent div element and not on the child.
How can I prevent animation (-webkit-animation) inheritance?
I tried to set -webkit-animation:none on the child but it doesnt work.
you could try using a JQuery animation (height, width in your case) on the div instead so that you can select the particular elements that you wish to animate
There is no animation of the child p because the child p is rendered inside the div. There is only an animation on the rendered div. You can try to hide the child p with css:
div#yourDivId p {
display: none;
visibility: hidden;
}
Now it works: http://jsfiddle.net/fiddly/FwHZn/1/
I had to set the width of the "p"-tag. Otherwise the animation will be applied on the div and on the p tag.
Is it possible to have a continuous border around adjacent html elements that have different heights?
I have tried overlapping the elements by the border width and setting the left border of the second element to white, but this creates a black/white bevel on the corner (http://jsfiddle.net/h4FwJ/). I would like to achieve the same look as in that fiddle, but without the bevelling.
Change the div1 style to this
border-left-width:0px;
margin-left: -10px;
background-color:White;