One would tink that changing :hover of a parent element applies the transformation to each of the child elements. However,
<a href="" class="pressRelease"><div class="pressRelease">
<div class="timestamp">
<p class="timestamp">02 Feb 2012</p>
</div>
<div class="pressReleaseTitle">
<p class="pressReleasetitle">release title</p>
</div>
</div></a>
div.pressRelease :hover {
background-color:#F2F2F2
}
div.timestamp {
float:left;
width: 110px;
padding-top:10px;
padding-bottom:21px;
}
div.pressReleaseTitle {
float:right;
width:498px;
padding-top:23px;
padding-bottom:21px;
padding-left:25px;
}
a.pressRelease {
text-decoration:none;
color:#767676;
display:block;
background-color:#063
}
I have this code in the HTML and CSS files, and the behavior is pretty odd: when I hover over the timestamp, only timespamp background color is changed, while the color of press release title remains unchanged. Obviously, I want the whole press release to be highlighted
Any ideas on how to fix this?
Thanks in advance
Error:
Replace:
div.pressRelease :hover
With:
div.pressRelease:hover
There should not be any space before :hover.
Suggestions:
The way you have written your HTML is not valid. An inline element <a> cannot contain a block element <div>.
The browsers will ignore the surrounding <a> tag. So, if you give a code like:
<a><div><p></p></div></a>
It will be rendered as
<a></a><div><p></p></div>
Try giving float:left to parent div as it is not wrapping child elements with 'float'
in addition to the error fix mentioned by Praveen
div.pressRelease {
float: left;
}
Add oveflow:auto to a tag to wrap the inner elements.
And remove div from div.pressRelease:hover
.pressRelease:hover {
background-color:#F2F2F2
}
div.timestamp {
float:left;
width: 110px;
padding-top:10px;
padding-bottom:21px;
}
div.pressReleaseTitle {
float:right;
width:498px;
padding-top:23px;
padding-bottom:21px;
padding-left:25px;
}
a.pressRelease {
text-decoration:none;
color:#767676;
display:block;
background-color:#063; overflow:auto
}
DEMO
Related
I tried to make a simple CSS hover but got a blinking image issue. Is there something I can do to fix that?
In the meantime, there is a empty gap between a H3 title and .term-image class because of my CSS settings for a class (.term-desc). Is there a way to eliminate this gap? It appears that the gap created by position:relative is not easy to be removed.
I need to hide the image when mouse hovers.
http://jsfiddle.net/fveqkcnj/
<div class="categorywrapper">
<div class="views-row views-row-1 views-row-odd views-row-first">
<h3 class="term-title">
Arts & Culture
</h3>
<div class="term-desc">
<p>This is Arts & Culture</p>
</div>
<div class="term-image"> <img src="http://placehold.it/235x150/ffffee" />
</div>
</div>
.categorywrapper {
width: 720px;
clear:both;
}
.categorywrapper .views-row {
float:left;
position:relative;
width:235px;
}
.categorywrapper .views-row h3 {
position:relative;
margin-left:30px;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #000;
width:80%;
min-height:38px;
}
.categorywrapper .views-row .term-desc {
position:relative;
top:100px;
left:20px;
width:200px;
}
.categorywrapper .views-row .term-image {
position:relative;
}
.categorywrapper .views-row .term-image:hover {
z-index:-2;
}
Add to your css: pointer-events:none; in the .categorywrapper .views-row .term-desc
Basically the result is:
.categorywrapper .views-row .term-desc {
pointer-events:none;
position:relative;
top:100px;
left:20px;
width:200px;
}
Additionally you use a negative z-index on your hover element which means it goes behind the parent elements and triggers the mouseout event which turns off the hover.
You can fix that by instead of applying the following css to the row instead of the image:
.categorywrapper .views-row:hover .term-desc {
z-index:2;
}
Here is the JSFiddle
If you want it over the image do the same but put the .term-desc element inside the tag.
I've never used z-index for image hovers, but I would imagine that if you move the z-index down, the browser no longer considers you to be hovering over the image, so you get the blinking effect you mention. Try producing your hover effect using an alternative background image instead. Or else by changing opacity.
I assume your intention is to show the text when hovering the image. If that is true, you've chosen not only a cumbersome approach, but also one that doesn't work.
Since your image is wrapped in a div already, it is extremely easy to achieve your goal: Just put the div with text that should appear inside the same container that has the image. Apply proper positioning and give it a default opacity: 0; so it's initially invisible.
Then
.categorywrapper .views-row .term-image:hover .term-desc {
opacity: 1;
}
To also get rid of the unwanted whitespace between your h3 and your image, just set the h3's margin-bottom: 0;
http://jsfiddle.net/fveqkcnj/5/
I have the following HTML :
<div class="top">
<div class="header title">Some Big Header Goes Here</div>
<div class="sub-header title">The fancyness enters here.</div>
A random link
</div>
Styled with the following classes :
.header {
padding:2%;
}
.sub-header {
font-size:120%;
font-style:italic;
}
.title {
font-size:158%;
line-height:80%;
}
.top {
display:block;
text-align:center;
border:1px solid lime;
padding:1%;
}
.top a {
/*color:red;*/ /* This works but I don't want this */
padding:100000px; /* This does not work, nor do smaller values */
margin:-999999px; /* This does nothing. */
}
How can I style the anchor link to position it with just a little padding and margin, so as to distance it just a little from the two headers above?
Add a display: block; to your .top a style and then adjust the margins and paddings accordingly.
top a {
display: block;
/*color:red;*/ /* This works but I don't want this */
padding:10px;
margin:20px;
}
Working fiddle: http://jsfiddle.net/jnz65/
An anchor tag does not inherit certain attributes from the parent when an href attribute is specified with it. That is why you need to add display:block to the style of the anchor tag specifically.
I want to align a line of text directly underneath a line of text.
HTML
<h4 class="support1">Number 123456</h4>
<h4 class="support2">Number 678910</h4>
CSS
.support1 { float:right;}
.support2 {float:right;}
Jsfiddle
http://jsfiddle.net/3Dtc4/
Use clear:right in .support2:
.support1, .support2 { float:right;}
.support2 { clear:right; }
http://jsfiddle.net/3Dtc4/1/
Is the floating necessary? You could just keep the elements as block elements and align the text right:
http://jsfiddle.net/3Dtc4/9/
with text-align:right;
As header elements are block level elements, they will push subsequent elements down. You can simply use text-align: right; to make sure that both are aligned to the right and the block-level effects will take care of them being beneath each other.
CSS
.support1, .support2 {
text-align:right;
}
Example: http://jsfiddle.net/23U6Q/
Is that the desired effect?
<h4 class="support1">Number 12345</h4><br>
<h4 class="support2">Number 678910</h4>
or
.support1 { float:right;}
.support2 {float:right; clear:right; }
So i need to make a div a link, and have the background colour change when hoverng over this div with the mouse. The problem is, this div has two child divs inside it and when i move the mouse in to the bounds pf the parent div it is actually on a child div. So while i can make it so that one of these child divs changes on hover the second one does not.
So i guess my question is, is there a way to make both child divs change when hovering one using css?
I dont mind changing code to use tables if thats easier but I need to find some way to make the entire div / tr change when hovering on one child / td.
What im actually looking to create here is something almost the same as th youtube recommended videos boxes (on teh right of the page)
Thanks in advance
CSS
#parent {
width: 318px;
height: 90px;
background-color: #FFFFFF;
margin: 5px 0px 5px 0px;
font-size: 10px;
}
#parent :hover {
background-color: #0000ff;
}
#child1 {
width:120px;
float:left;
}
child2 {
width:188px;
float:right;
}
HTML (with some other stuff)
<c:forEach var="item" items="${list}">
<a href="webpage?item.getinfo()">
<div id="parent">
<div id="child1">
<img src="img.jpg">
</div>
<div id="child2">
${item.getinfo2()} <br>
${item.getinfo3()} <br>
</div>
</div>
</a>
</c:forEach>
Code is something like that. Ive been hacking it up for the last while but that was something like what i had before
If the one you're able to hover over is the first, you only need CSS:
.mavehoverable > div:hover, .makehoverable > div:hover + div {
background-color: red;
}
With this HTML:
<div class="makehoverable">
<div>Child 1</div>
<div>Child 2</div>
</div>
Hovering over Child 1 will also highlight Child 2. Vice-versa doesn't work in CSS though, so that would need some JS.
I think you might just need to fix a line of your CSS. Change:
#parent :hover {
background-color: #0000ff;
}
to:
#parent:hover {
background-color: #0000ff;
}
That seemed to work for me.
Have you tried using jQuery? You could do something like this:
http://jsfiddle.net/UtdYY/
Html:
<div class='color'>
<div class='color child'>test123</div>
<div class='color child'>test456</div>
</div>
Javascript:
$('.color').hover(function(){ $(this).toggleClass('red'); });
CSS:
.red { color:red; }
.child {height: 50px; }
Edit: Cleaned up the javascript, thanks elclanrs
Try this http://jsfiddle.net/rsarika/rtGw5/1/
I have a simple CSS help popup that's been working well for me in most simple layouts. But now it needs to work inside a scrolling div.
Given the example HTML:
<div style="overflow:scroll; width:80px">
<a href="#" class="tooltip">
an image
<span>some hidden tooltip which is a bit longer in here</span>
</a>
</div>
(Note: in the real world there will be multiple things with tooltips inside the scrolling div)
I have the CSS:
a.tooltip span
{
display:none;
position:absolute;
padding:0px 0px 2px 2px;
background:yellow;
text-decoration:none;
vertical-align:top;
}
a.tooltip:hover span
{
display:inline;
position:absolute;
padding:0px 0px 2px 2px;
top:0;
left:18px;
background:yellow;
text-decoration:none;
vertical-align:top;
z-index:5;
}
a.tooltip
{
border-width:0px;
text-decoration:none;
}
a.tooltip:hover
{
border-width:0px;
text-decoration:none;
position:relative;
}
Is it possible to have the popup pop out of the scrolling div so it's readable without causing the div to scroll?
Is this achievable in CSS alone, without using javascript?
edit: Live Example kindly provided by Kyle Sevenoaks.
You can set the :hover on the entire DIV. and place your span directly in the div. (This solution does not work in IE6 for example).
see a working example here: http://jsfiddle.net/5mASU/1/
Or you could set i higher z-index to the tooltip and use position fixed, it works:
http://jsfiddle.net/5mASU/3/
also avoid resetting the same values in the hover here is a cleaned up version:
http://jsfiddle.net/5mASU/4/
if for example you set
a {
padding: 5px;
}
a:hover {
// no need to reset the padding here
}
you don't need to reset the padding in the :hover the hover heritages the padding form the style set for the a. Just reset values you want to change between the normal and the hover status.
I don't think it's possible, because z-indexes work from the parent, the child element won't be able to display the span over the top. This CSS tooltip just adds another element when the <a> is hovered. I think you might have to go the jQuery route.
Also, try to post live examples of your problem instead of a long list of HTML and CSS, it's easier for us to help you :)