I have a div that has a link in it, right now if I hover over the link it chnages color, but I want to hover over the div aswell to chnage the color, here is the code:
<div class="first_product margin_right left">
<a href="/link">
</a><div class="first_product_text">Automation <span>+</span></div>
</div>
I'm all for using Jquery, but if you want to avoid it
HTML:
<div class="first_product margin_right left">
<div class="first_product_text">
Automation <span>+</span>
</div>
</div>
CSS:
.first_product_text:hover{background-color:#f22;}
heres the JsFiddle
This should solve your problem.
CSS:
.first_product_text div:hover a {color:#HOVERCOLOUR;}
Related
I'm trying to apply an overlay to create an effect similar to https://fancy.com when the login or signup link is clicked i.e the background should be dimmed.
The problem is that my nav bar and content boxes are not subjected to the overlay for some reason but not sure why?
I have created a fiddle to explain: https://jsfiddle.net/p861yfLp/1/
My Code:
<body>
<div class="overlay">
<nav>
Menu
</nav>
<div id="content">
<div class="box">
Box
</div>
</div>
</div>
</body>
Change these files
CSS - set the position to absolute
.overlay {
position: absolute;
}
EDIT: Following #DaniP answer the changes to the css are not required if you want a 'modal' feel for the overlay. Tho if you want to overlay everything I would recommend using the absolute position.
HTML - no need to make your overlay contain all other html
<body>
<div class="overlay"></div>
<nav>
Menu
</nav>
<div id="content">
<div class="box">
Box
</div>
</div>
</body>
Now your overlay will 'overlay'.
The half-black background-color is actually applied, but the nav (as child-element) has its own background-color (#FFF) defined. If you remove its background-color, it works:
.nav {
background-color: transparent;
}
https://jsfiddle.net/rw60gzbz/
I'm trying to make a thumbnail with bootstrap3.
How can I make this, I mean to put this zoom-in glyphicon over the image?:
(sorry for paint shop :D)
Actually, I've got this:
with the following code:
<div class="thumbnail PNET-thumbcolor">
<div class="PNET-cursor-hand center-block text-center">
<img data-src="holder.js/140x140" alt="Producto">
<span class="glyphicon glyphicon-zoom-in"></span>
</div>
<div class="caption">...
</div>
</div>
Is there a way to make this with CSS only, without touching the bootstrap style?
Thanks in advance!
Please comment or ask if you need more information and/or improve! :)
UPDATE:
JSFIDDLE: http://jsfiddle.net/Leandro1981/AKwb4/1/
I edit only CSS, adding a position relative to Lens icon, and set a fixed width to container.
.PNET-cursor-hand
{
width:140px;
}
.PNET-thumbcolor .glyphicon-zoom-in
{
position:relative;
top:-20px;
right:5px;
text-align:right;
display:block;
}
Here the demo
I have the following:
<div id="side-menu" class="sidebar-nav span2">
<div class="sidebar-link"><span>Link 1</span></div>
<div class="sidebar-link"><span>Link 2</span></div>
</div>
I'm trying to make each of the two divs change color when you hover over them - whether you hover over the text of off to the right or left of the text. Currently the color changes only if I hover over the text. Any idea how this can be done? Here's my fiddle with css:
http://jsfiddle.net/PTSkR/56/
You have a space in the hover selector. This matters because the space is the descendant selector in CSS
div.sidebar-link :hover{
background-color: #E3E3E3;
}
This means that only hovered descendants of .sidebar-link are affected by the rules. Remove the space.
http://jsfiddle.net/ExplosionPIlls/PTSkR/57/
You can achieve this easily by this following code: Link
.cstDiv{
padding:10px;
width:55px;
}
div.cstDiv:hover{
background-color:gray;
color:white;
cursor:pointer;
}
<div>
<div class="cstDiv">Link I</div>
<div class="cstDiv">Link II</div>
<div class="cstDiv">Link III</div>
<div class="cstDiv">Link IV</div>
</div>
I want to use span inside div
div is used to put a red horizontal line
<div style="background-color:red;">
</div>
span is used inside div to put elements to right
<div style="background-color:red;">
<span style="float:right;">
ABC
</span>
</div>
But the horizontal line do not get red color, only ABC is shown in right, infact there is no effect of div style like width:900px......why?
I'd suggest:
<div style="background-color:red; text-align:right;">ABC</div>
Otherwise, you need to add overflow:auto to your div's style definition if you do want to leverage the <span> as in your original example.
Cheers
Add overflow:auto to the div:
<div style="background-color:red;overflow:auto;">
<span style="float:right;">
ABC
</span>
</div>
jsFiddle example
Floating the inner span causes the div to essentially collapse, and adding the overflow rule allows it to regain the span.
The float is not giving your div any height. You need to follow it up with a clear. Try this:
<div style="background-color:red;">
<span style="float:right;">
ABC
</span>
<div style="clear: both;"></div>
</div>
You need to add the property overflow:hidden; in your DIV.
Below I mentioned the Code:
<div style="background-color:red; text-align:right; overflow:hidden;"> ABC </div>
I need to achieve something like this:
<a style="display:block;" href="#">
<div style="float:left;display:block;">Left</div>
<div>
<div style="display:block;">Right</div>
<div style="display:block;">Right Bottom</div>
</div>
</a>
Basically a button with 2 columns and the right column having 2 rows.
It shows up correctly in modern browsers with inline/block support but in IE6 and IE7, whenever I hover the left div (with float) it'll display as the 'select' text icon instead of the hand icon (i believe once float, block will be cancelled and displayed as inline). Is there any way I can achieve this without using an image as a whole? I need it to be text because it's important for SEO and retina displays.
:( :(
<a href="http://www.google.com/" target="_blank" style="display:block; overflow: hidden" href="#">
<div style="float:left; width:150px;">Left</div>
<div style="float:right; width:150px;">
<div style="display:block;">Right</div>
<div style="display:block;">Right Bottom</div>
</div>
<div style="clear: both;"></div><!-- This will clear the floats for IE -->
</a>
To avoid text cursor add this CSS -
a div{cursor: pointer;}
Demo - http://jsfiddle.net/ZhKmr/4/