.Row:hover .Contents { background-color:Blue; }
<div class="Row">
<span class="Contents">Row Contents</span>
</div>
<div class="Row">
<span class="Contents">Row Contents</span>
</div>
In the above sample, only the first Row Contents responds to hover. See http://jsfiddle.net/3JRTQ/. I'm not sure what I'm doing wrong, particularly since .Row .Contents {} works for all instances just fine.
I don't want to highlight the entire row - just the span with text, but I want the whole row to respond to hover.
Is this possible with CSS only?
You've hit a bug in Chrome 25 (and 26, too). Remember, always try another browser.
Fix for this example. Make the Span the hover
.Row .Contents:hover { background-color:Blue; }
OR make the Div the element that is going to be changing:
.Row:hover { background-color:Blue; }
Hope this helps
Related
I have markup that goes something like this
<div class='wrap'>
<div class='container'>
Body Container content
</div>
<div class='container'>
Footer Container content
</div>
</div>
I want to display a header containing, amongst other things, a logo above the first, body, container. This I accomplished by defining
.container::before
{
background-image(url(path/to/image.jpg);
background-size:cover;
content:'';
}
The above works. The problem is that the logo ends up not onlyu above the body content but also above the footer content which is not quite the desired result. I have played around with various combinations of
.container::before:nth-of-child(1)
{
}
.container:nth-of-child(1)::before
{
}
but I haven't quite found the right syntax to target the ::before pseudo element for the first .container instance. I hope that someone here will be able to tell me how it should be done.
If the worst comes to the worst I can do it with a spot of jQuery but I would like to avoid that.
Would you consider using <main> W3 4.4.14 The main element and <footer> 4.4.9 The footer element per HTML5 elements with class of .container on each? That way you can reference/target those elements without psuedo elements
main::before
{
background-image(url(path/to/image.jpg);
background-size:cover;
content:'';
}
This way the header/logo you are looking for would only appear above the first container only. Then if you need to apply pseudo elements to <footer> you could do something like:
footer::before
{
background-image(url(path/to/image.jpg);
background-size:cover;
content:'';
}
OK so I'll add another answer because it doesn't appear that anyone has solved all of your issues.
First, there is a typo in your css: background-image(url(path/to/image.jpg) is missing the closing paren.
To do what you want, however, there is a simple css selector :). In your example, you try nth-to-child(), but the correct syntax for what you want is nth-child(). Look below for two options, with a working demo.
.container:first-child:before
{
display: block;
content: "Before Element";
/* other styling that you choose*/
}
/* the following selector will also work
.container:nth-child(1):before
{
display: block;
content: "Before Element";
}
*/
<div class='wrap'>
<div class='container'>
Body Container content
</div>
<div class='container'>
Footer Container content
</div>
</div>
Note that the display: block; part is so that the before content appears on it's own line, since :before elements by default are display: inline-block;.
I dont think that there is a way to making it work with nth-of-child, but it will definitely work with first-child (if you always need it only in the first element with class .container):
.container:first-child:before
{
background-image(url(path/to/image.jpg);
background-size:cover;
content:'';
}
My first thought here is that there should be an additional class for the header, or use the <header> and <footer> elements in place of divs. For example:
<div class="wrap">
<div class="container header">
Header
</div>
<div class="container footer">
Footer
</div>
</div>
and
.header::before {
// stuff to make your logo
}
However, if for some reason you can't change the html, then the :first-child selector should work for your needs, as others have answered.
If you want to use nth-child() you need to add it to the parent of the element that you want to select. In this case .wrap.
.wrap:nth-child(1):before
{
background-image(url(path/to/image.jpg);
background-size:cover;
content:'';
}
I've hit a snag in html and css.
I created a div and wanted to put a logo image on its left and a button link on its right but stubborn css insists on making it move on to separate lines ,I used float:left and float:right.
Would it be something like this? http://jsfiddle.net/QFEKN/
<div>
<img src="https://www.gravatar.com/avatar/c5b9fb1230ea2fe0dc96151cba3098d5?s=32&d=identicon&r=PG&f=1" style='float: left' />
<button>Link</button>
</div>
You mean something like this?
Put a div on your img and button and set width to 100%. Then float your image and your button. I updated the fiddle of thewheat: fiddle
Your CSS
#box
{
width:100%;
}
#logo
{
float:left;
width:50%;
/*padding and Margin according to your need*/
}
#buttons
{
float:right;
width:50%;
}
Your HTML
<div id ="box">
<div id ="logo">
/*your img file here */
</div>
<div id="buttons">
/* Your links/buutons */
</div>`enter code here`
One of the thing you can do here is that you create a table put your logo in first cell of the row and next cell you can add your link, after that you can set float/margin to the positioning you want..hope that helps
You have to use "float property". without it things will not work well in all browsers and then you will get browsers issues too.
Do this , This will work fine.
Check this fiddle
img
{
float:left;
width:100px;
}
button
{
float:right;
width:100px;
}
so I'm having a bit of a tough time figuring this out.
I want to edit some links within a specific div, seems simple enough right?
Just put
#mydiv a:link {color:#B40404}
However it does not seem to be working for me! Below is my code:
<div id="leftcontent"><div id="MYDIV">why this is no work</div>
CSS:
#MYDIV {
background-image: url(http://mypicture.com/mypic.jpg);
width:290px;
height:280px;
font-family:Tahoma,Geneva,sans-serif;
padding:25px;
background-repeat:no-repeat;
}
#MYDIV a:link {color:#B40404; }
I have no idea why this isn't working. Any help appreciated!
Thanks
HTML should be like below (a tag inside the div)
<div id="leftcontent">
<div id="MYDIV">why this is no work</div>
</div>
CSS
#MYDIV a{color:#B40404; text-decoration:none}
DEMO
In your case (div inside the a tag) you need not to write id name in css directly write style for a tag
a{color:#B40404; text-decoration:none }
or
#leftcontent a{color:#B40404; text-decoration:none }
DEMO 2
Your CSS is selecting an tag INSIDE a tag. You either need to do the following:
a #MYDIV { /* css code */ }
or
<div id="MYDIV"><a>My link here</a></div>
EDIT:
I just read your comment on the other page. In that case, you need to add either a class or an ID to the and then reference that.
<div id="leftcontent"><div id="MYDIV">why this is no work</div>
CSS
#myLink { /* add style here */ }
<div id="leftcontent"><div id="MYDIV">why this is no work</div>
in css
#MYDIV a:link {color:#B40404; }
i think you need not style the hyperlink in your case.
Since the styling would ultimately would be applied to your div is enclosed within the anchor tag. So give the color: #your_hex_code to the #MYDIV which would suffice your need. That is what you need.
If you made a mistake in the html, Sowmya answer is perfect.
Optional:
Moreover you can use jquery to style that, $("#your anchor").parent().css or use closest.
Thanks
this way is not a correct formating in coding html this will not validate in html validator
<div id="leftcontent">
<a href="http://google.de">
<div id="MYDIV">why this is no work</div>
</a>
</div>
instead of that do this
<div id="leftcontent">
<div id="MYDIV">
sample
</div>
</div>
if you want the whole div link add basic style in your div a
css
#MYDIV {
float:left;
}
#MYDIV a {
float:left;
width:100px;
height:100px;
}
I'm using jQuery to add a Class to a few elements.
I'm not new to adding classes, nor removing them. But I'm still somewhat intermediate with styles and any flexibility styles can perform to single elements.
Here's what's going on:
I have 2 Divs that I'm affecting with jQuery:
<div id="columnleft">stuff in here</div>
<div id="columncenter">bigger stuff in here</div>
In a nutshell, column left is about 155px wide, while columncenter is positioned relative to columnleft, with a margin-left of 162px
Here's my styles:
<style>
#columnleft {
float:left;
position:relative;
text-align:left;
width:155px;
}
#columncenter {
position:relative;
padding-bottom:50px
margin:0;
margin-left:162px;
}
</style>
I'm basically toggling these 2 divs with the jQuery examples below:
So far I've gotten these 2 separate instances to work:
$("#columnleft").hide();
$("#columncenter").css("margin","0px");
then........
$("#columnleft").show();
$("#columncenter").css("margin-left","162px");
Though this works, I'm not quite satisfied.
I'd prefer to create a class or two that I can use to toggle the hiding of columnleft, while also changing the margin-left at the same time.
It's all fine with the example above, when I'm only using jQuery. But there are times when a page loads, and the columnleft is meant to be hidden, and columncenter is meant to be expanded, from the beginning. Would be nice to not need jQuery to enter the scene at those moments.
All I could come up with is:
<style>
.disappear { display:none; }
.maximize { margin:0px; margin-left:0px; }
</style>
When the page loads:
<div id="columnleft" class="disappear">stuff in here</div>
<div id="columncenter" class="maximize">bigger stuff in here</div>
it seems that columncenter is ignored. (columnleft indeed does disappear)
Also, toggling with jquery, the same result occurs.
Column Center hates me!
Does anyone see where I'm missing the mark?
View JSFiddle: http://jsfiddle.net/tuanderful/bTZq8/
What if you had another div that contains both #columnleft and #columncenter, and has a class of .hide-left or .show-left:
<div class="hide-left">
<div id="columnleft">stuff in here</div>
<div id="columncenter">bigger stuff in here</div>
</div>
Then add the following CSS:
.show-left #columnleft {
display: block;
}
.show-left #columncenter {
margin-left: 162px;
}
.hide-left #columnleft {
display: none;
}
.hide-left #columncenter {
margin-left: 0;
}
You can update your jQuery to simply toggle the .hide-left or .show-left classes on the parent container.
What I did here is similar to adding .disappear and .maximize styling, but I added a bit of context around the two columns. The neat thing is that all of the styling is handled purely by CSS - when you want to show or hide your sidebar, you only need JavaScript to update the state of the container; that is, change the class in the container from hide to show or vice versa.
You need to put !important on the css styling.
.maximize {
margin-left: 0px !important;
}
That makes it so that it overrides any other styling of the same kind. Check it out here.
There is an order of importance in CSS. An id # is considered more important than a class . (there can only be one id and many classes after all). So if you are trying to override an id with a class, you need to use !important.
each type of selector in css is weighted differently id being higher than classes and classes being higher than objects
to fix your problem make the selector as such
#columncenter.maximize
this will overwrite the rule before it
don't use !important while it might work now it can be hard to find out why something is being overridden later on
Using a method I've done before but having issues. Not sure if it's a sprite or what.. Basically you have two versions of an image saved into one file with them stacked on top of each other and use CSS to adjust the margins when hovering. Here's an example of it working successfully: http://minimalpluscreative.com
Trying to do the same thing here, but running into issues with overflow:hidden; not working. Instead, the the full (double) image is shown. Here's what it looks like: http://cl.ly/023p1I1D1W0W3a1T1q1R It should be just the top half of the image with overflow:hidden; preventing the other half from showing.
Help? Some kind of syntax error I'm sure...
HTML:
<div id="work" class="sub">
<h3>MUSIC VIDEOS</h3>
<img id="show_fire" class="thumbnail sprite" src="images/daniel_gomes_soundoffire_sprite.png" />
</div>
CSS:
.sprite {
width:140px;
height:61px;
overflow:hidden;
}
.sprite:hover {
margin-top:-61px;
}
I've never seen this done before except with background images, but I don't see why not… it just seems like you need a lot of extra css, and extra html to get it to work as opposed to a background image.
As was said earlier, it's hard to see the problem without seeing your actual code in context, but based on what I see, there could be a few potential things wrong:
You need to wrap the image in a containing element, and assign the width, height and overflow to that. Hidden overflow will hide what's outside of the boundaries that div contains. The image element is the image, it doesn't contain the image, so setting it to overflow:hidden isn't going to hide andything, and assigning it a width will just resize it, not "crop" it (which is the effect you're going for). So you'd need something like:
<div id="work" class="sub">
<h3>MUSIC VIDEOS</h3>
<a class="sprite" href="#">
<img id="show_fire" class="thumbnail" src="images/daniel_gomes_soundoffire_sprite.png" />
</a>
</div>
with this css:
.sprite {
width:140px;
height:61px;
overflow:hidden;
}
.sprite img {
margin-top: 0;
}
.sprite:hover img {
margin-top: -61px;
}
I suggest you use 'a' as the containing element, as not all browsers will recognize the hover pseudo-class on tags other than anchor tags.
I know you think using an image instead of a background image is simpler, but using background images, you can accomplish all this with only one element and less css.
In the example site you refer to, the overflow:hidden property is set on the outer 'div#a'
'div#work' in your code should have it's overflow set to hidden.
Thus when you change the margin on your image it will move within the frame of your outer div.
Additionally I had to add a tag name to the hover declaration.
<html>
<head>
<style>
#work{
position:relative;
overflow:hidden;
width:140px;
height:61px;
}
div.sprite {
margin-top:0;
}
div.sprite:hover {
margin-top:-61px;
}
/* instead of an image */
.sprite div{
height:61px;
}
.red {background:red}
.blue {background:blue}
</style>
</head>
<body>
<div id="work">
<div class="sprite">
<div class="red">a</div>
<div class="blue">b</div>
</div>
</div>
</body>