I am trying to style the parent div when hover over a div but it doesn't seem to work.
Here is my work
.icon-grid:hover ~ .ab_section_element {
border: 2px solid black;
background-color: white;
}
<div data-v-714a5b85="" class="ab_section_element">
<span data-v-714a5b85="" class="icon icon-grid clickable">
Section (Left Text)
</span>
</div>
Is there anything I'm doing wrong?
You can't select the parent element, but you can "fake" the selection of the parent element with an absolutely positioned pseudo-element:
.ab_section_element {
position: relative;
}
.icon-grid:hover::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 2px solid black;
background-color: white;
z-index: -1;
}
/* just for demonstration */
body {
background: #ccc;
}
<div data-v-714a5b85="" class="ab_section_element">
<span data-v-714a5b85="" class="icon icon-grid clickable">
Section (Left Text)
</span>
</div>
However, this approach requires that the child element itself shouldn't be positioned (non-statically).
You cannot style a parent with hover, but you can do an adjacent.
.div1 {
width: 60px;
height: 60px;
background: red;
}
.div2 {
width: 60px;
height: 60px;
background: green;
}
.div1:hover~.div2 {
background: yellow;
}
<div class='div1'></div>
<div class='div2'></div>
This may solve your problem.
.ab_section_element .icon-grid:hover{
border: 2px solid black;
background-color: white;
}
Related
I am pretty new to css. I have defined a dot element with different collors.
/*Dots*/
.ccrdot {
display: inline-block;
position: absolute;
background-color: #8d8d8d;
border-radius: 50%;
opacity: 0.5;
width: 10px;
height: 10px;
pointer-events: none;
}
.ccrdot.red {
background-color: #FF0000;
}
.ccrdot.yellow {
background-color: #fffb09;
}
.ccrdot.green {
background-color: #67ff09;
}
But when i use this like:
> <span class="ccrdot"></span><span>Text Text Text</span>
<span class="ccrdot"></span> Text Text
or
<div class="ccrdot"></div> Text Text
The text slides under the dot element. I want to present them side by side. What did i do wrong?
Thank you.
position: absolute takes them out of the text flow, so there's no space reserved for them anymore, if you remove it they'll have their own space.
/*Dots*/
.ccrdot {
display: inline-block;
background-color: #8d8d8d;
border-radius: 50%;
opacity: 0.5;
width: 10px;
height: 10px;
pointer-events: none;
}
.ccrdot.red {
background-color: #FF0000;
}
.ccrdot.yellow {
background-color: #fffb09;
}
.ccrdot.green {
background-color: #67ff09;
}
.left-icons is inline-block and has a height of 21px:
Note that the height of the image inside of it is 38px:
CSS Tricks says:
If the height of the containing block is not specified explicitly, and
the element is not absolutely positioned, the value of its height
computes to auto (it will be as tall as the content inside it is, or
zero if there is no content).
The height of the containing block isn't being explicitly specified. So why is my outer element smaller than the image inside of it?
HTML
<div class='tango-directive-template'>
<div class='tango level-{{ level }}'>
<span class='left-icons'>
<img
ng-show='tango.children.length > 0'
src='/assets/images/show-arrow.png'>
<span class='author'>A</span>
</span>
<textarea
ng-focus='focus = true;'
ng-blur='focus = false;'
rows='1'>{{ tango.text }}</textarea>
<p class='menu' ng-show='focus'>
<span class='glyphicon glyphicon-indent-left'></span>
<span class='glyphicon glyphicon-indent-right'></span>
<span class='glyphicon glyphicon-arrow-down'></span>
<span class='glyphicon glyphicon-arrow-right'></span.
</p>
</div>
<tango
ng-repeat='subtango in tango.children'
tango='subtango'
level='{{ +level + 1 }}'>
</tango>
</div>
CSS
.tango-directive-template {
.tango {
margin-bottom: 20px;
.left-icons {
display: inline-block;
text-align: right;
width: 67px;
img, .author {
position: relative;
bottom: 15px;
margin-right: 5px;
height: 100%;
}
img {
height: 20px;
}
.author {
border: 1px solid gray;
border-radius: 25px;
padding: 10px;
}
}
textarea {
font-size: 18px;
width: 700px;
line-height: 135%;
padding: 8px 16px;
resize: none;
border: 1px solid white;
overflow: hidden;
}
textarea:focus {
outline: none;
border: 1px solid gray;
overflow: auto; // only have scroll bar when focused
}
.menu {
width: 750px;
span {
float: right;
margin-left: 15px;
cursor: pointer;
}
}
}
#for $i from 0 through 10 {
.level-#{$i} {
position: relative;
left: #{$i*65}px;
}
}
}
Use an inline block.
span.left-icons{
display: inline-block;
}
You probably should try a clearfix method.
Look here: What methods of ‘clearfix’ can I use?
I have two horizontal lines on top of each other and I want to put a image on top of those lines, but I am not able to achieve this with CSS. The image gets hidden behind the horizontal lines.
JSFiddle
here is the image
my HTML
<div class="creambar"></div>
<div class="graybar silhouette"></div>
my CSS
graybar { height: 20px; background-color: #343434; width: 100%; }
.graybar .silhouette { background: url("graphics/panr_silhouette_2.png"); }
.creambar { height: 5px; background-color: #d4c293; width: 100%; }
Is something like this that you want?
.creambar {
border-bottom: 20px solid #343434;
border-top: 4px solid #d4c293;
bottom: -69px;
position: relative;
width: 100%;
}
.graybar {
border-bottom: 20px solid #343434;
background: url("http://i.stack.imgur.com/3xbAl.png") 0 0 no-repeat;
height: 62px;
position: relative;
}
<div class="creambar"></div>
<div class="graybar"></div>
See Full Page.
Change the z-index. The z-index of the image you want to show should have the highest value.
.graybar .silhouette z-index should be higher than the z-index of .graybar.
.graybar { height: 20px; background-color: #343434; width: 100%; z-index:1;}
.graybar.silhouette { background: url("graphics/panr_silhouette_2.png"); z-index:3; }
.creambar { height: 5px; background-color: #d4c293; width: 100%; z-index:1; }
Try this. I simply changed the z-index For one to be on top of the other. You can read more on the z-index property here
<div class="creambar"></div>
<div class="graybar silhouette"></div>
CSS
graybar { height: 20px; background-color: #343434; width: 100%;position:relative;z-index:1; }
.graybar .silhouette { background: url("graphics/panr_silhouette_2.png"); position:relative;z-index:99; }
.creambar { height: 5px; background-color: #d4c293; width: 100%; position:relative;z-index:1; }
how can I create menu like on the picture?
Requirements:
Built using Bootstrap columns, must be responsive
In normal state, only Option and icon (green square) can be seen
OnHover: The Suboption (in blue rectangle) expands pushing Option up and also Caption in red rectangle appears, also pushing the whole Option up.
When one Menu item is hovered, all the others must stay down, not moving
Expanding with animation
Here's my fiddle attempt: http://jsfiddle.net/52VtD/7878/
HTML of one item (all are wrapped in a row):
<div class="col-xs-12 col-sm-3 nopadding item">
<div class="mask">
<div class="inner-wrapper">
<p>Option A</p>
<div class="hidding-guy">
<p>Hello</p>
Suboption
Suboption
Suboption
</div>
<i class="origami o-01"></i>
</div>
<div class="btn-red ">CAPTION</div>
</div>
</div>
CSS:
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
.footer-menu-wrapper {
background: #ddd;
position: fixed;
bottom: 0;
width: 100%;
margin: 0;
}
.footer-menu-wrapper .item {
position: relative;
}
.footer-menu-wrapper .item:hover .hidding-guy, .footer-menu-wrapper .item:hover .hidding-guy > * {
height: auto;
}
.footer-menu-wrapper .mask {
border: 1px solid #ccc;
width: 100%;
}
.footer-menu-wrapper .mask .hidding-guy {
height: 0px;
}
.footer-menu-wrapper .mask .hidding-guy > * {
display: block;
height: 0px;
}
.btn-red {
background: #e91333;
color: #fff;
width: 100%;
min-height: 66px;
border: 0px transparent;
text-align: center;
}
Alter your css to:
.footer-menu-wrapper .mask {
border: 1px solid #ccc;
width: 100%;
position: absolute;
background-color: #ddd;
bottom: 0;
}
now it behave like a dropup menu. Keep in mind that you must reset the positioning for the responsive layout like:
#media (max-width: 768px){
.footer-menu-wrapper .mask{
position: relative;
}
}
DEMO
UPDATE DEMO with media query
UPDATE:
Hide the CAPTION - opacity: 0 and show it on hover.
Second hide the options - visibilety: hidden and also show it on hover.
This ist a quick solution! The rest should be simple css styling
DEMO
I have created a button with background image parts on the left, center and right. I would like to position it at the center of the page, but I can't do it.
I have simplified the example with simple color backgrounds instead of images.
HTML:
<a id="button" href="#">
<div id="b-left"></div>
<div id="b-center">Content</div>
<div id="b-right"></div>
</a>
CSS:
#button {
height: 40px;
margin: 0 auto;
}
#b-left, #b-right, #b-center {
display: inline;
float: left;
height: inherit;
}
#b-left {
background-color: blue;
width: 30px;
}
#b-right {
background-color: green;
width: 30px;
}
#b-center {
background-color: yellow;
}
Here's the demo:
http://jsfiddle.net/yh6sS/4/
Thanks a lot.
Replace all divs inside your link with spans. This will make the code to be valid.
"margin: 0 auto;" property only works, when there's a fixed width, for example 100px. So it can be deleted in your case.
Use the next technique to make all buttons: http://jsfiddle.net/2GJu2/
<div class="outer">
<a href="#">
<span class="b-left"></span>
<span class="b-center">Content</span>
<span class="b-right"></span>
</a>
</div>
.outer { text-align: center; }
a {
display: inline-block; margin: 0 10px; line-height: 30px;
position: relative; }
a span { display: inline-block; }
.b-center { background: yellow; }
.b-left,
.b-right { position: absolute; top: 0; width: 10px; height: 30px; }
.b-left { left: -10px; background: red; }
.b-right { right: -10px; background: green; }
Add text-align: center to a parent element, and add display: inline-block to #button.
See: http://jsfiddle.net/thirtydot/yh6sS/7/