Here is my piece of code:
<div class="print">
<img src="images/icons/185-printer.png" width="18" height="18" alt="printicon"/
<div class="print_text">Print page</div>
<div class="triangle"></div>
</div>
What I'm trying to is when I hover over the print class, it shows both print_text class and triangle class. Is there any chance to do this? It would help me a lot. Thank you in advance!
Try this:
.print_text, .triangle { display: none; }
.print:hover .print_text, .print:hover .triangle { display: block; }
.print > div { display:none; }
.print:hover > div{ display:block; }
Related
I want to change the colours of divs separately but don't want to use the following css.
The syntax I am using is as follows:
HTML:
<div id="wrapper"><div><div><div><div><div><div><div>
</div></div></div></div></div></div></div></div>
CSS:
div>div>div {background-color:yellow;}
div>div>div>div {background-color:green;}
div>div>div>div>div {background-color:indigo;}
div>div>div>div>div>div {background-color:violet;}
div>div>div>div>div>div>div {background-color:chocolate;}
div>div>div>div>div>div>div>div {background-color:brown;}
Your best/only easy solution is using Classes or Id's and attaching them to your CSS sheet (as per Daniel's answer).
HTML:
<div id="wrapper" class="ClassDiv1">
<div class="ClassDiv2">
<div class="ClassDiv3">
<div class="ClassDiv4">
<div class="ClassDiv5">
<div class="ClassDiv6">
<div class="ClassDiv7">
<div class="ClassDiv8">
CSS:
.ClassDiv1{background-color:yellow;}
.ClassDiv2{background-color:green;}
.ClassDiv3{background-color:indigo;}
etc.
If you want 1 color for 2 div tags you can just do this in your style:
.ClassDiv1 .ClassDiv2{background-color:brown;}
But seriously, rather go to W3Schools and learn a bit on CSS as it will help you a LOT!
Use a naming convention.
.innerDiv1{
background-color:yellow;
}
.innerDiv2{
background-color:green;
}
.innerDiv3{
background-color:indigo;
}
.innerDiv4{
background-color:violet;
}
.innerDiv5{
background-color:chocolate;
}
.innerDiv6{
background-color:brown;
}
or you can use a pre-processor like LESS and nested inside each other
.innerDiv{
background-color:yellow;
div{
background-color:green;
div{
background-color:indigo;
div{
background-color:violet;
div{
background-color:chocolate;
div{
background-color:brown;
}
}
}
}
}
}
I would go with classes:
.bg-yellow { background-color: yellow; }
...
.bg-brown { background-color: brown; }
HTML:
<div id="wrapper">
<div class="bg-yellow"><div><div><div><div><div><div class="bg-brown">
</div></div></div></div></div></div></div>
</div>
Using this solution makes it easier to identify the color of the element when inspecting the HTML.
Following is the html structure, that is repeating inside my html page.
<article class="tweet-inner">
<div class="tweet">
<div class="text">
<p>Coming down! Time for Croation BBQ </p>
</div>
<p class="last">
<span class="pull-right">
<small> Hello this is first text </small>
<small> Hello this is second text </small>
</span>
</p>
</div>
</article>
The above is one unit of repeating structure inside my HTML.
The functionality I want is, when you hover over the tweet text, .tweet .text p then the content of .last should show.
I did the following :
.last{
display: none;
}
.tweet .text p:hover .last{
display: block;
}
Two doubts :
You should be able to see the .last of only the element upon which you have hovered.
The above is not working, the fiddle is http://jsfiddle.net/EymLT/
Thanks!
Your CSS selector is incorrect. Firstly .last is not a child of .text, and the p element cannot be hovered because it is invisble. Try this:
.tweet:hover .last{
display : block;
}
Updated fiddle
Replace your last style with this:
.tweet .text:hover + .last{
display : block;
}
You can use ~ in CSS
DEMO http://jsfiddle.net/kevinPHPkevin/EymLT/4/
.last{
display:none;
}
.text:hover ~ .last{
display : block;
}
If you replace my ~ with > it will be more browser compatable. The > ensures only the child is seleted so you can use a parent div as the hover target.
.last{
display:none;
}
.tweet:hover > .last{
display : block;
}
i have 2 images.My constraint is that I have to put a new div after the end of the 1st image.But they come on different lines.I googled a lot and found that float:left does the trick
I am already using it,but still they are coming in different lines.I dont know where I am going wrong.
Jsfiddle
span.tab {
padding: 0 50px; /* Or desired space*/
}
.span.tab {
display: inline-block;
float:left;
}
#div23 {
display: inline-block;
float: left;
}
#topdiv1 {
display: inline-block;
float: left;
}
#topdiv3 {
display: inline-block;
float:left;
}
html
<br />
<div id='topdiv1'><div id="widget1" class="sticky1">
<div id='topdiv3'>
<img src="https://lh3.googleusercontent.com/-TrGnsESMpDc/AAAAAAAAAAI/AAAAAAAAAAA/lcUg6MaCxmg/photo.jpg?sz=50" />
<div id='div23'>
<span class="tab"></span>
<img src='https://lh3.googleusercontent.com/-TrGnsESMpDc/AAAAAAAAAAI/AAAAAAAAAAA/lcUg6MaCxmg/photo.jpg?sz=50'/>
</div> </div>
Please help.
You don't apply the float to the parent container. You apply the float to the child elements:
#topdiv3 > * {
float:left;
}
http://jsfiddle.net/samliew/b9TWE/1/
If you want to remove the space between the images, remove the span.
http://jsfiddle.net/b9TWE/2/ this fixes it, you just need to have the <a> containing the first image to float
#topdiv3 > a{
float: left;
}
More on how floats work (great article)
By floating the first <a> containing the image you remove it from the regular document flow. the <div> containing the seconds image will resume the normal flow and position itself next to the <a>
Your topdiv3 must be closed before div div23.
<div id='topdiv1'>
<div id="widget1" class="sticky1">
<div id='topdiv3'>
<img src="https://lh3.googleusercontent.com/-TrGnsESMpDc/AAAAAAAAAAI/AAAAAAAAAAA/lcUg6MaCxmg/photo.jpg?sz=50" />
</div>
<div id='div23'>
<img src='https://lh3.googleusercontent.com/-TrGnsESMpDc/AAAAAAAAAAI/AAAAAAAAAAA/lcUg6MaCxmg/photo.jpg?sz=50'/>
</div>
</div>
</div>
http://jsfiddle.net/arunu/8gvvr/
I've tested it on firefox and it worked the way you did.
But anyway, your html markup is a little bit confuse, doesn´t it?
I know this is a classical one but I find no answer on the net:
I have this html code:
<div class="comment>
<div class="myLinks">Some Links</div>
<div class="comment">
<div class="myLinks">Some Links</div>
</div>
</div>
Then I have this css (written in scss):
.myLinks {
display: hidden;
}
.comment {
&:hover {
.myLinks {
display: visible;
}
}
}
When the pointer goes above the first comment block, the nested one's hover effect is also activated. What I want is my links to be visible only in the comment being hovered, not in his parents or children.
How can I do this? Thanks!
.myLinks{
display:none;
}
.comment:hover > .myLinks {
display: block;
}
Used to this css
.myLinks{
display:none;
}
.comment:hover .myLinks{
display:block;
}
Demo
or
-------
.myLinks{
visibility:hidden;
}
.comment:hover .myLinks{
visibility: visible;
}
Demo2
I have an icon that I display on top, right of a div on hovering over the div. My code is like this:
<div class='edit_hover_class'>
<!-- some code -->
</div>
And the corresponding css file contains:
.edit_hover_class:hover {
background: url("trash.gif") no-repeat scroll right top;
}
I want to attach a link to the edit icon, is it possible with plain css? If so, how?
You could hide a link until hover like so:
<div class='edit_hover_class'>
<a href='#'><img src='icons/trash.gif' /></a>
</div>
.edit_hover_class a{
visibility:hidden;
}
.edit_hover_class:hover a {
visibility:visible;
}
See jsfiddle:
http://jsfiddle.net/Auzm5/
Or if you only want the icon to link, use CSS visibility:
http://jsfiddle.net/Auzm5/1/
I havent tested this but its worth a try:
HTML
<div class='edit_hover_class'>
<a href='#'><img src='icons/trash.gif' /></a>
</div>
CSS
.edit_hover_class a {
pointer-events: none;
cursor: default;
}
.edit_hover_class a:hover {
pointer-events: auto;
cursor: pointer;
}