CODEWITHSUNDEEP
jquery
Ashley Briscoe
Ashley Briscoe

Reputation: 737

how to change this jquery so that it works on mouse over and mouse out

I want this to open on mouse over then close again when the mouse leaves leaves the containing div not just the h2, tried a few things and had no luck.

HTML:

<div class="deliverycontainer">
<h2 style=" margin-left: 2px; margin-right: 2px; color: #6588b2; background: #e6edf5;  padding: 10px; cursor: pointer;">Europe: £7.50 (or free on orders over £100)</h2>
<div class="delivery_times">
<table>
<tbody>
<th>
Country
</th>
<th>
Delivery Times (approx)
</th>
<tr>
<td>Belgium</td>
<td>+ 1 day</td>
</tr>
</tbody>
</table>
</div>
</div>

CSS:

table {  width: 100%; }

table th { font-size: 14px; padding: 5px; background: #e6edf5; }

table tr {width: 48%; margin: 1%;}

table td { font-size: small; text-align: center; padding: 6px; background: #e6edf5;}


</style>

Jquery

<script type="text/javascript">

$(document).ready(function(){
    dynamicFaq();
});

function dynamicFaq(){
    $('.delivery_times').hide();
    $('h2').bind('click', 'hover', function(){

        $(this).toggleClass('open').next().slideToggle('fast');


    });
}

</script>

Upvotes: 0

Views: 144

Answers (4)

adeneo
adeneo

Reputation: 318222

As there's two different elements, you will have to do something like this:

$(function(){
    var timer;
    $('.delivery_times').hide();
    $('h2, .delivery_times').on({
        mouseenter: function(e) {
            if (e.target.tagName==='H2') $(this).addClass('open');
            $('.delivery_times').slideDown('fast');
            clearTimeout(timer);
        },
        mouseleave: function(e) {
            timer = setTimeout(function() {
                $('h2').removeClass('open');
                $('.delivery_times').slideUp('fast');
            }, 200);
        }
    });
});

​ FIDDLE

Upvotes: 1

user1432124
user1432124

Reputation:

Try this and if it is wrong then please comment

$("h2").on("mouseenter",function (e) {
    $(".delivery_times").show();
  })
$("h2").parent().on("mouseleave",function () {
   $(".delivery_times").hide();
});

Upvotes: 0

Abhishek
Abhishek

Reputation: 691

Try this

$("h2").on('mouseenter', function() { 
    alert('mouse enter');
}).on('mouseleave', function () {
    alert('mouse leave');
});

Upvotes: 1

Sudhir Bastakoti
Sudhir Bastakoti

Reputation: 100175

Do you mean:

$("h2").hover(function() {
  $(".delivery_times").show();
},
function() {
  $(".delivery_times").hide();
});

OR

$("h2").on({
  mouseenter: function () {
    $(".delivery_times").show();
  },
  mouseleave: function () {
   $(".delivery_times").hide();
  }
});

Upvotes: 2

Related Questions