As I have demonstrated in this pen, I am having a problem with the hover style of a link taking away the styles of the div it is in. The problem goes away, though, if I change the style on the #div div {background-color:blue; } to div {background-color:blue; }.
Just remove the second div in your CSS. Your problem is caused by the #div div which in CSS, actually means the div INSIDE the parent div. Right now you don't have that.
#div {
background-color: blue;
}
a:hover {
color: red;
}
<div id="div">
<a>Yo!</a>
</div>
Related
Is there any way how to hide child inside parent and show after he runned away from div ?? I am using anymation, transform - translate from (100%,0) to (0,0), but during moving, this div overlaps the parent div.. and i cant use z-index because of child. Child cant go upper in layer then parrent... so is there any other way? How to show child only out of parent div ?
I am making dynamic menu with anymation, and i want after click on link show subMenu just next to
you want something like this ? use overflow:hidden on parent or if you want the child to be visible use overflow:visible
you can set animation instead. it still works like the example below
let me know if it helps
.parent {
width:100px;
height:100px;
border:2px solid black;
overflow:hidden;
}
.child {
width:100px;
height:96px;
border:2px solid red;
opacity:0;
transition:0.5s;
}
.parent:hover .child {
transform:translateX(30px);
opacity:1;
}
<div class="parent">
<div class="child">
</div>
</div>
I'm been learning for web design as well as development for quite some time now but I'm still stumped by some basic rules of CSS.
I'm trying to figure out how the behavior of :hover works when hovering one element, to affect another. But I came across something unexpected...
Q: Why does element .one turn black when .two is hovered?
Here's the code and the fiddle.
HTML:
<div class="one">
<div class="two"></div>
</div>
CSS:
div {
width: 100px;
height: 100px;
position: absolute;
top:0;
}
.one {
left:0;
background: red;
border: 5px solid black;
}
.two {
left:200px;
background: yellow;
}
.one:hover {
background: black;
}
here is my jsFiddle
Help anyone?
The element .two is found inside the .one element. so hovering .two means that you are also hovering .one. The event "bubbles" up to the parent element.. even if it doesn't look like that visually. To hover each one independently you will have to take .two out of .one. You might want to wrap both in a container to properly set their positioning. working jsFiddle
<div class="someContainer">
<div class="one"></div>
<div class="two"></div>
</div>
You have to change your html structure to achieve this.
As right now div having class two is inside the div class one so two is becoming child of class one div so when you hover on div which have class two it automatics consider that you are hovring on class one div as well.
Use absolute div and don't make it child of class one div.
Working on a responsive website, I want to remove a certain element, however, I want the child element to still be displayed.
Setting the CSS rule for parent element to display:none; removes that element and all the children. Event if I set the child element to display:block; it still doesn't appear on the site.
Something like this:
HTML:
<div id="parent">
<div id="child">Some text.</div>
</div>
CSS:
#parent {
display:block;
width:500px;
height:200px;
background:blue;
}
#child {
display: inline-block;
padding:20px 5px;
background: red url(someimage.jpg);
}
#media only screen
and (max-device-width : 700px) {
#parent {
/* code that makes the browser disregard the height of this div and not display its background */
}
#child
/* the child is still displayed */
}
}
What would be the proper CSS solution?
It looks like you just want to knock out the background of the parent in certain layouts. To do that, just use
#knockout {
background: transparent;
border: none;
outline: none;
box-shadow: none;
padding: 0;
}
This will remove the background, the borders and any shadow effects on the parent item - as though it wasn't rendered at all.
You could try setting all children to display:none, and then override it with the display:block for the relevant child. Example:
#parent>* {display:none}
#parent>#child {display:block}
I am working on joomla template, and i make a custom button inside module, but the button css is override by module css. how can i fix this. help would be appreciated.
This is css i want for the button:
.button-middle {
background: url("../images/button-mid.gif") repeat-x scroll 0 0 transparent;
color: #FFFFFF;
float: left;
height: 27px;
line-height: 27px;
}
The code below has override button background :(
div.module div div div div, div.module_menu div div div div, div.module_text div div div div, div.module_grey div div div div {
background: none repeat scroll 0 0 transparent;
margin: 0;
overflow: hidden;
padding: 0;
}
template_css.css (line 342)
div.module div div div, div.module_menu div div div, div.module_text div div div, div.module_grey div div div {
background: url("../images/module_default/mod_tlb.png") no-repeat scroll left top transparent;
padding: 0 15px 15px;
}
template_css.css (line 304)
div.module div div, div.module_menu div div, div.module_text div div, div.module_grey div div {
background: url("../images/module_default/mod_trb.png") no-repeat scroll right top transparent;
padding: 0;
}
Add !important at the end of the background:
background: url("../images/button-mid.gif") repeat-x scroll 0 0 transparent !important;
Does the <link> declaration for your custom CSS file (if you're using one) come after Joomla's included CSS files within your <head> section? If you're not using a custom CSS file, do consider it - it means you can completely skirt similar issues by having your own selectors "trump" Joomla's by the simple virtue of having your CSS load last (thereby taking higher priority).
<!-- Joomla styles -->
<link rel="stylesheet" href="joomla.css" />
<!-- anything in here overrides anything in "joomla.css" -->
<link rel="stylesheet" href="custom_styles.css" />
(Omit the / from the closing brackets for HTML 5.)
If you've had this issue once, believe me that you'll have it again. (And again...)
If you have control over the markup you might be able to get away with adding an id attribute and then making your background selector #someid. As far as I can tell there were only class and element selectors, a single id selector might trump them all.
Disclaimer: im on the train and I can't test it right now. This could be totally incorrect. I also don't have the CSS specificity spec up to check either.
Edit:
Consider the following markup:
<div id="info" class="module">
<div>
<div>
<div>
<div>
<div>
<div>
<div class="test">
data
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
And then the following css:
.test { background-color: red; } /* 0,1,0 */
div.module div div div div div div { background-color: blue; } /* 0,1,7 */
#info .test { background-color: green; } /* 1,0,1 */
The word "data" will have a background color of green.
Even if you can't easily change the markup to add an id, try to find an id any where in the parental chain or you could write your selector as div.module .button-middle { ... }, which still classifies as a 0,2,1. As long as your style is more specific than the one you are trying to override, it will trump.
fiddle here.
And a couple of links on specificity: here and here.
Why when I want to resize div, image in div doesn't change its size !? It's CASCADE style sheets, isn't it?
--EDIT--
.box{padding:0px;margin-left:10px;display:inline-block;margin-right:auto;width:20px;height:20px;border:1px solid red;}
<div class="box">
<img src="larrow.gif"/>
</div>
It's cascade, but width and height are not inherited.
You might want to do something to make the image follow the size of its parent.
Like
div.box img { width: 100%; height: 100%; }
<img> tags have an implicit width of either the image's natural width or the width attribute of the tag that must be overriden with css. Try this to make the image 100% of the width of its parent <div>:
div img{
width: 100%;
}
I think you have a bit of a misunderstanding of what cascading actually is. I'd recommend reading the part of the spec that deals with the cascade.
Your style selector only matches elements with the class box. The div has that class, but the img doesn't. Thus, the div has the style applied and the img doesn't. Try:
.box
{
padding:0px;
margin-left:10px;
display:inline-block;
margin-right:auto;
border:1px solid red;
}
.box, .box img
{
width:20px;
height:20px;
}
<div class="box">
<img src="larrow.gif"/>
</div>