I know other people have had similar problems but their solutions do not work.
What is the reason for the following?
div.line_container:hover #sidebar_loader1 {
z-index: 2;
}
the above code does change the z-index.
div:hover #sidebar_loader1 {
z-index: 2;
}
but this one does.
what is the reason for this because i need to know because i need only that class when hovered to change a style. Please help.
MY HTML code
<img src="" alt="image" id="logo">
<div class="line_container">
<img src="http://png.findicons.com/files/icons/1580/devine_icons_part_2/128/png.png" alt="IMAGE" class="line_image">
<span class="line_text">
THIS IS SOME SAMPLE TEXT >
</span>
</div>
<div class="sidebar_loader" id="sidebar_loader1">
TEST for 1
</div>
<div class="line_container">
<img src="http://png.findicons.com/files/icons/1580/devine_icons_part_2/128/png.png" alt="IMAGE" class="line_image">
<span class="line_text">
THIS IS SOME SAMPLE TEXT >
</span>
</div>
<div class="sidebar_loader" id="sidebar_loader2">
TEST for 2
</div>
<div class="line_container">
<img src="http://png.findicons.com/files/icons/1580/devine_icons_part_2/128/png.png" alt="IMAGE" class="line_image">
<span class="line_text">
THIS IS SOME SAMPLE TEXT >
</span>
</div>
<div class="sidebar_loader" id="sidebar_loader3">
TEST for 3
</div>
</div>
#sidebar_loader_1 is not a descendant of div.line_container, so using the descendant combinator (space) is incorrect.
Try the sibling combinator. Either + or ~ should work.
The div with id sidebar_loader1 is not nested in any div with a class line_container
Related
Bootstrap DIVs are stopping the CSS :hover from working. I think this is a selector issue?
This doesn't work:
div#testimonial1 {
display: none;
}
span:hover+div div#testimonial1 {
display: block;
}
<h2 style="text-align:center">Testimonials</h2>
<div class="col-sm-12 col-md-4 arrow_box" style="padding-top:20px">
<div class="col-xs-12 testimonial1h">
<span style="line-height:75px;font-size:16px;verticle-align:middle"><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png" width="75" height="75" alt="" /> Name Here</span>
</div>
</div>
<div class="col-sm-12 col-md-8">
<div id="testimonial1">
<p style="text-align: center">"Blah blah blah"</p>
<h3 style="text-align: center">Name Here</h3>
</div>
</div>
Yet this does:
div#testimonial1 {
display: none;
}
span:hover+div div#testimonial1 {
display: block;
}
<h2 style="text-align:center">Testimonials</h2>
<span class="button" style="line-height:75px;font-size:16px;verticle-align:middle"><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png" width="75" height="75" alt="" /> Name Here</span>
<div class="col-sm-12 col-md-8">
<div id="testimonial1">
<p style="text-align: center">"Blah blah blah"</p>
<h3 style="text-align: center">Name Here</h3>
</div>
</div>
I have tried selectors like span.button etc but I can't seem to get the right selector to target the span for a hover effect?
In your first example, the span is nested in a div and in the second example, it isn't. the + selector is an adjacent sibling selector. Meaning it selects the next element it's adjacent to. There is no adjacent element to the span in your first example.
To get your first example to work, you need to set the :hover pseudo class on the element that is adjacent to the div div#testimonial1 you want to show, which would be the div that precedes it. Like this.
div#testimonial1 {
display: none;
}
.arrow_box:hover + div div#testimonial1 {
display: block;
}
<h2 style="text-align:center">Testimonials</h2>
<div class="col-sm-12 col-md-4 arrow_box" style="padding-top:20px">
<div class="col-xs-12 testimonial1h">
<span style="line-height:75px;font-size:16px;verticle-align:middle"><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png" width="75" height="75" alt="" /> Name Here</span>
</div>
</div>
<div class="col-sm-12 col-md-8">
<div id="testimonial1">
<p style="text-align: center">"Blah blah blah"</p>
<h3 style="text-align: center">Name Here</h3>
</div>
</div>
In the first code block, the span is an only child of a div (.testimonial1h). (I think you mean .testimonial1.)
In the second code block, the span is not a child of a div, but a sibling of a div.
The adjacent sibling combinator (+) (also known as the next-sibling selector) targets an element that is immediately preceded by another element.
That's not going to work in the first code block, because the span has no siblings.
It works in the second code block because div#testimonial1 is a descendant of a div (you have div div#testimonial1), and that div is immediately preceded by a span sibling.
If you want the first code block to work (i.e., target an element when a sibling's child is hovered), that's not going to work with CSS. See here for details: Is there a CSS parent selector?
You are comparing apples to oranges because your first code snippet the html DOM structure is different from the second yet your are applying the same CSS which is not going to work.
On your first one you have two divs as the parents of the span. And on your second one the span is a direct child of the body.
Try this HTML structure, it should work.
<h2 style="text-align:center">Testimonials</h2>
<span class="col-sm-12 col-md-4 arrow_box" style="line-height:75px;font-size:16px;verticle-align:middle"><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png" width="75" height="75" alt="" /> Name Here</span>
<div class="col-sm-12 col-md-8">
<div id="testimonial1">
<p style="text-align: center">"Blah blah blah"</p>
<h3 style="text-align: center">Name Here</h3>
</div>
</div>
It is indeed a selector issue. The plus sign is an adjacent sibling selector but in your first example span has no siblings. In your second example it is followed by a div so the selector works as expected.
I'm using CSS to target a specific element in the following code. The element I want to target is the last element in the first div (.1g07). I need to do this without referring to .1g07 as the class name is dynamic.
Here is the CSS I use:
[data-sigil="reactions-bling-bar"]:first-child:last-child
And the HTML:
<a href="#" data-sigil="feed-ufi-trigger">
<div class="_rnk _2eo- _1e6" id="u_1_k" data-sigil="reactions-bling-bar">
<div class="_1g07">
<div class="_1g05" style="z-index:3">
<i class="img sp_I5ooBdwh_8A sx_9a2202"></i>
</div>
<div class="_1g05" style="z-index:2">
<i class="img sp_I5ooBdwh_8A sx_1f77a0"></i>
</div>
<div class="_1g05" style="z-index:1">
<i class="img sp_I5ooBdwh_8A sx_fbc017"></i>
</div>
<div class="_1g06">48</div>
</div>
<div class="_1j-b"><span class="_1j-c">12 comments</span></div>
</div>
</a>
It's not targetting this element though (in this case the element that contains the number 48).
Any ideas on where I am going wrong?
You can do like this
[data-sigil="reactions-bling-bar"] div div:last-child
[data-sigil="reactions-bling-bar"] :first-child :last-child
Sample snippet
[data-sigil="reactions-bling-bar"] div div:last-child
{
color: red
}
<a href="#" data-sigil="feed-ufi-trigger">
<div class="_rnk _2eo- _1e6" id="u_1_k" data-sigil="reactions-bling-bar">
<div class="_1g07">
<div class="_1g05" style="z-index:3">
<i class="img sp_I5ooBdwh_8A sx_9a2202"></i>
</div>
<div class="_1g05" style="z-index:2">
<i class="img sp_I5ooBdwh_8A sx_1f77a0"></i>
</div>
<div class="_1g05" style="z-index:1">
<i class="img sp_I5ooBdwh_8A sx_fbc017"></i>
</div>
<div class="_1g06">48</div>
</div>
<div class="_1j-b"><span class="_1j-c">12 comments</span></div>
</div>
</a>
[data-sigil="reactions-bling-bar"]:first-child:last-child targets an element with a data attribute called sigil that is both the first and last child of its parent.
I think you're looking for [data-sigil="reactions-bling-bar"] > :first-child > :last-child, which would select the last child of the first child of the element with that data-sigil attribute.
you can try this
#u_1_k div div:last-child
{
/* css as you wants */
}
your CSS selector targets nothing, because:
[data-sigil="reactions-bling-bar"] targets the div with the attribute data-sigil having the value reactions-bling-bar;
[data-sigil="reactions-bling-bar"]:first-child targets the div with the attribute data-sigil having the value reactions-bling-bar AND which is the first child of its container;
[data-sigil="reactions-bling-bar"]:first-child targets the div with the attribute data-sigil having the value reactions-bling-bar AND which is the first child of its container AND which is the last child of its container.
This can't work.
If you can't modify the HTML, I dont think you can do what you want, maybe with:
[data-sigil="reactions-bling-bar"] > div > div:last-child {
/* CSS rules here */
}
I want to make 5 or 6 divs that will contain an image and some static text. However, I want to alternate which side of the div the image is on. So the first div it would be on the left, the next one on the right, and so on.
Is it best to generalize them all into a class, and then hash out the differences inside that class? Or should I just create two different classes which would easily solve the problem but make the code a bit harder to maintain? Is there a generally accepted way to handle these sorts of things?
I have tended to handle this sort of thing by creating two separate classes, but I'm not sure that this is the best way to do it and I'm wondering if there are better ways to approach the problem.
Try some CSS like this:
section > div:nth-of-type(odd) > img {
float:left;
}
section > div:nth-of-type(even) > img {
float:right;
}
... and HTML like this:
<body>
<section>
<div>
<img src='xxx.png'>
<p>Text</p>
</div>
<div>
<img src='xxx.png'>
<p>Text</p>
</div>
<div>
<img src='xxx.png'>
<p>Text</p>
</div>
</section>
</body>
I would use :nth-child to specifically target a class.
You can alter the code to your preferences by checking this: NthMaster
.item:nth-child(even) > span {
float: left;
}
<div class="container">
<div class="item">
<img src="http://placehold.it/50x50">
<span>Text</span>
</div>
<div class="item">
<img src="http://placehold.it/50x50">
<span>Text</span>
</div>
<div class="item">
<img src="http://placehold.it/50x50">
<span>Text</span>
</div>
<div class="item">
<img src="http://placehold.it/50x50">
<span>Text</span>
</div>
<div class="item">
<img src="http://placehold.it/50x50">
<span>Text</span>
</div>
<div class="item">
<img src="http://placehold.it/50x50">
<span>Text</span>
</div>
</div>
I've tried #logos img:first-child{} to try and format my top img a little different from the rest but it just doesn't work. Can anyone help me figure out why?
<div id="logos" name="logos">
<div class="container">
<div class="row">
<br>
<h1 class="centered">SHOWS</h1>
<img src="img/kenshows400x300.jpg" class="img-responsive" alt="Ken Cooper" width="400px" height="300px">
<hr>
</div><!-- end row -->
<div class="row">
<div class="col-lg-6">
<img src="img/shows/jkllogo450x300.jpg" class="img-responsive" alt="Jimmy Kimmel Live" width="450px" height="300px">
</div>
<div class="col-lg-6">
<img src="img/shows/latelateshowlogo450x300.jpg" class="img-responsive" alt="Late Late Show" width="450px" height="300px">
</div>
</div><!-- end row -->
</div>
</div>
The first-child pseudo-selector selects any element which is the first child of its parent. In your example, in the first .row div, the h1 "SHOWS" is the first element and your img is the second element. So it doesn't get selected. In contrast, in the other div, both img tags are the first child of their parent, so they do get selected.
In other words, img:first-child doesn't select the first img tag, it selects the img tag which is the first child of its parent. If it has a previous sibling, then first-child doesn't apply.
We can fix your code by instead putting the first-child on .row so that the img in the first row div is selected, which also happens to be the first image.
#logos .row:first-child img {
border: 1px solid blue;
}
<div id="logos" name="logos">
<div class="container">
<div class="row">
<br>
<h1 class="centered">SHOWS</h1>
<img src="img/kenshows400x300.jpg" class="img-responsive" alt="Ken Cooper" width="400px" height="300px">
<hr>
</div> <!-- end row -->
<div class="row">
<div class="col-lg-6">
<img src="img/shows/jkllogo450x300.jpg" class="img-responsive" alt="Jimmy Kimmel Live" width="450px" height="300px">
</div>
<div class="col-lg-6">
<img src="img/shows/latelateshowlogo450x300.jpg" class="img-responsive" alt="Late Late Show" width="450px" height="300px">
</div>
</div> <!-- end row -->
</div>
</div>
:first-child / :last-child required any list in one section, but in your code img wrapped with div so try to add :first-child on just parent div, see below sample code
#logos .row:first-child img{}
Try this:-
#logos .row:first-child img{
}
Another option could be first-of-type
try #logos img:first-of-type{}
I have a container which has three divs. Each div contains a hidden div which has a 'hide' class (display:none;) inside which is supposed to show when hovering on its parent div.
I use toggleClass('show') to which makes the secretDiv display has a block. I need the secretDiv to be shown when hovering on the parent div.
The parent div should show on top of the div below, and not push the other divs
http://jsfiddle.net/2xLMQ/4/
--- HTML ---
<div class="row">
<div class="element">
<img src="http://placehold.it/200x100" alt="" title="" />
<div class="secretDiv hide">
<p>Some secret text and stuff</p>
</div>
</div>
<div class="element">
<img src="http://placehold.it/200x100" alt="my image" title="image title" />
<div class="secretDiv hide">
<p>Some secret text and stuff</p>
</div>
</div>
</div>
<div class="row">
<div class="element">
<img src="http://placehold.it/200x100" alt="" title="" />
<div class="secretDiv hide">
<p>Some secret text and stuff</p>
</div>
</div>
<div class="element">
<img src="http://placehold.it/200x100" alt="my image" title="image title" />
<div class="secretDiv hide">
<p>Some secret text and stuff</p>
</div>
</div>
</div>
--- CSS ---
.hide {display:none;}
.show {display:block;}
.row {height:160px;background:#dedede;float:left;width:480px;position:relative:z-index:1;}
.row .element {position:relative;z-index:9;text-align:center; float:left; background:#666;width:200px;padding:12px;margin:6px;}
.row .image {}
.row .secretDiv {background:#ff0000;padding:8px;}
--- JS ---
$('.element').hover(function(){
$('.element .secretDiv').toggleClass('show');
});
First at all change your selector to only match the respective hidden div:
$('.secretDiv',this).toggleClass('show');
Then add another class on that item to display ontop of the others :
$(this).toggleClass('ontop');
And the class:
.row .ontop {z-index:10;background:orange;}
Check this Demo
Simply add absolute positioning to your 'secret' div:
.row .secretDiv {background:#ff0000;padding:8px; position: absolute; top: 5px; left: 5px;}
Fiddle here: http://jsfiddle.net/moonspace/2xLMQ/12/
As a bonus, I've edited your jQuery to show only the 'secret' div associated with each element:
$('.secretDiv', this).toggleClass('show');