Develop Reference

how can I give hover effect to overlapped nodes (z-index)

<div class="wrap">
<div class="col"/>
<div class="col"/>
<div class="col"/>
<div class="col"/>
<div class="col"/>
<div class="row"/>
<div class="row"/>
<div class="row"/>
<div class="row"/>
<div class="row"/>
</div>
and this col & row are overlapped like this
I want to give hover effect to both elements.
I tried with jQuery event handler
but the behind one is a
dynamically generated node
so I tried something like this
$('html').on('mouseover', '-behindOne-', (e) => {
console.log(e);
});
but event.target was higher overlapped node
and event.current was html
and this was undefined
what should I do?
I want to effect background-color change.
I want use hover event at same time.
each hover event works well
but at the center of that Pic
only effect on higher one (z-index)
also i can't do like this
.wrap:hover .col {}
.wrap:hover .row {}
it should only effect on mouseOvered col and row
I want this!~~

if you want to hover effect on both of them
.col:hover{
//change somethings
}
.row:hover{
//change somethings
}
but this code may help just for css tricks.
you can try also with jquery like
$( ".col" ).mouseover(function() {
//change somethings
});
$( ".row" ).mouseover(function() {
//change somethings
});
and please explain what do you want to change exactly with hover effect
PLUS div-->
//this is html block
<div class=plus>
<div class="col"/>
<div class="row"/>
</div>
//this is css block
.plus div:hover{
background-color:black
}

How to change CSS of child element <span> inside parent <div> element Using jQuery onclick event?

I have two menu icons, both classed .menuentry, with the IDs #topicicon and #searchicon, in a menubar. Beneath them are two larger divs, #topiclist and #searchform, both initially set to display:none;.
What I would like to do is click each menu icon and display the corresponding larger div underneath, as well as getting rid of the other larger div if it has been display previously.
So, for example, when I click #topicicon, it displays #topiclist and hides #searchform.
The code is being used on this website, in the menubar at the top: http://bonfiredog.co.uk/bonfog
And this is the code that I am using.
HTML:
<div id="topicicon"><img src="topic_icon.png" /></div>
<div id="searchform"><img src="search_icon.png" /></div>
<div id="topiclist"></div>
<div id="searchform"></div>
CSS:
#topiclist {
display:none;
}
#searchform {
display:none;
}
jQuery:
$("#topicicon").click(function(){
$("#topiclist").css("display", "visible");
$("#searchform").css("display", "none");
}, function(){
$("#formlist").css("display", "hidden");
});
Not working as of now...

You have to make two click handlers for #topicicon and #searchform and use .hide() and .show() as shown :-
$("#topicicon").click(function(){
$("#topiclist").show();
$("#searchform1").hide();
});
$("#searchform").click(function(){
$("#topiclist").hide();
$("#searchform1").show();
});
and you are using two div's with same id's i.e searchform so change the id of second searchform div to say searchform1 and try above code.

You could avoid having to write multiple click handlers, and reuse across different components with the following:
$(function () {
$('.showRelated').click(function () {
var relatedId = $(this).data('rel');
$('.related').hide(); // hide all related elements
$(relatedId).show(); // show relevant
});
});
.related {
display: none;
margin-top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div id="topicicon" class="showRelated" data-rel="#topiclist"><i class="fa fa-newspaper-o"></i></div>
<div id="searchicon" class="showRelated" data-rel="#searchform"><i class="fa fa-search"></i></div>
<div id="topiclist" class="related">Topic List</div>
<div id="searchform" class="related">Search Form</div>

"visible" is not correct value for display propriety. You should add "display: block", or "display: inline-block", or "display: inline" or any other value that is admitted by display propriety.

Toggling popup DIV tags not working

I am trying to make a simple page with a few divs, where if you click on one div it moves to the center and getting bigger (other divs still visible in the background). When you click on another div visible in the background the div in the center goes back to where it was before and clicked div goes to the center and resizing. Also if you click on the div in the center it should go back to where it was before.
I made a Jquery script for it but it doesnt work properly - clicking on any div first time works fine but any following clicking just stops working.
Here is an html with some styling:
<style>
#outside1 {background-color:gray;} #outside2 {background-color:blue;} #outside3 {background-color:brown;}
#inside1 {background-color:red;} #inside2 {background-color:green;}
#inside3 {background-color:pink;} #inside4 {background-color:yellow;}
#inside5 {background-color:gold;} #inside6 {background-color:silver;}
.outside {width:100px; height:90px; margin:5px; } .inside {display:none; margin:2px; }
#test1 {height:400px; }
</style>
<div id=test1>
<div id='outside1' class='outside'> div outside 1 <br/>
<div id='inside1' class='inside'> div inside 1 <br/> </div>
<div id='inside2' class='inside'> div inside 2 <br/> </div>
</div>
<div id='outside2' class='outside'> div outside 2 <br/>
<div id='inside3' class='inside'> div inside 3 <br/> </div>
<div id='inside4' class='inside'> div inside 4 <br/> </div>
</div>
<div id='outside3' class='outside'> div outside 2 <br/>
<div id='inside5' class='inside'> div inside 3 <br/> </div>
<div id='inside6' class='inside'> div inside 4 <br/> </div>
</div>
</div>
And thats some js and jquery:
kd_small={top: 0, left: 0, opacity: 1, width:100, height:90 } ;
kd_big = {top: -90, left: +50, opacity: 1, width:200, height:150 };
var t=0;
function hextend(d){
d.animate(kd_big); d.find('div').show(); $('.outside').off();
var sbs=$(d).siblings(); $(sbs).off(); sbs.append('i am siblings');
d.append('I AM CLICKED'); hshrink($(sbs));
d.on('click', function (){ hshrink($(d)); });
$(sbs).on('click', function (){ hextend($(sbs)); });
}
function hshrink(s){
s.find('div').hide(); s.animate(kd_small);
}
$('.outside').on('click', function(){
hextend($(this) );
});
$('.inside').on('click', function(e){
e.stopPropagation(); $(this).html('inside div clicked' + t +'times');
t++;
});
Thanks

Instead of using .on('click' use delegate('click' or `.live('click', as you are appending divs.
However, both .live and .delegate have been superseded, so I imagine this would be a 'quick fix'.
Looking again at the code, I think you may have to use 'addClass' to add the correct class to the div's you are appending, and use the console to check the elements once they are centered and make sure the classes exist for the elements.

javascript code to make a div slide down and up (show/hide)

I have a page and I have little question mark images next to sections where if the question mark image is clicked, a div right below the section will appear sliding the rest of the page down. Essentially a slide down/slide up javascript function.
Ex:
Section Title (? IMG)
<div id="section">blah blah blah</div>
<br><br>
Section Title 2 (? IMG)
<div id="section2">Blah2 blah2 blah2</div>
In my example above, the content inside div section and div section2 is hidden at first, but when the ? IMG is clicked for that section, the content will reveal itself and the rest of the page will slide down at the same time to make room for the content inside the divs. And on reverse, if the question mark image is clicked while content is shown, it will slide up and hide itself and the page below will slide up as well filling the gap.
How would I write this? I need it expandable so I can add multiple div's which can be titled accordingly and expanded individually.
Thanks

With jQuery you can do this:
HTML:
<div id="clickme">
Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123" />
Script:
$('#clickme').click(function() {
$('#book').slideDown('slow', function() {
// Animation complete.
});
});
Source: jQuery docs http://api.jquery.com/slideDown/
To include jQuery on a HTML page, you can use the following in the head:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
You could also download it yourself at place it on the server you want.
EDIT: Full answer with ready code then....
HTML:
<h1 id="id1" class="clickme">click1</h1>
<div id="section1">blah blah blah</div>
<br><br>
<h1 id="id2" class="clickme">click2</h1>
<div id="section2">Blah2 blah2 blah2</div>
SCRIPT
$('.clickme').click(function() {
$(this).next().slideToggle('slow', function() {
// Animation complete.
});
});

Try this for instance:-
<div class="wrapper">
<div class="btn">section Title (? IMG)</div>
<div class="section">blah blah blah</div>
</div>
<div class="wrapper">
<div class="btn">section Title (? IMG)</div>
<div class="section">Blah2 blah2 blah2</div>
</div>
<script>
$(function(){
$('.btn').click(function(e){
$(this).parent().toggleClass('slideOut');
});
});
</script>
.section{
display:none;
}
.slideOut .section{
display:block;
}
.btn
{
cursor:pointer;
}

how to add a div and apply a style to it in jquery

the code is like this:
<div id="comments">
<h2>comments list</h2>
<div class="clear-block">....</div>
<div class="clear-block">....</div>
<div class="clear-block">....</div>
<div class="indented">....</div> // this div is indented.
<div class="box"...</div>
</div>
now, i want to use jquery to add a border to the
<h2>......</div>
part.maybe i shoule add a div label first before the h2 label, then the close label
</div>
before
<div class="box"> .
then using a style
border:1px...
but i don't how to do it. thank you.
the border effect like this http://phplist.xxmn.com/1.jpg

$('.clear-block,.indented,.box').css('border', '1px solid black');