Как увеличить в DIV с помощью CSS

Question

Я хочу к DIV получить больше, когда mouseneter

Так that's мой код

Script

$(document).ready(function() { 
    $(".header div").mouseleave(function() { 
     $(this).stop().animate({ 
      height: "50px" 
     }, 600); 
    }); 

    $(".header div").mouseenter(function() { 
     $(this).stop().animate({ 
      height: "100px" 
     }, 600); 
    }); 
}) 

    menu += "<div class='row ftContainerOut header'><div class='col-md-12 ftContainer header'><div class='row ftHeader'><div class='col-xs-9 t09'>" + items[item].Title + "</div><div class='col-xs-3 text-right'></div></div><div class='row'><div class='col-xs-6' style='padding-top:10px'><img src='" + items[item].Imagen.Url + "' class='img-responsive img-center' style='border:0px solid blue; max-width:150px;max-height:120px;' /></div><div class='col-xs-6'>" + spec + "</div></div></div></div>"; 

и CSS

#header_div { 
width:100%; 
height:100px; 
background-color:#ffffff; 
position:fixed; 
top:0; 
left:0; 
} 

#header_div { 
max-height: 100%; 
max-width: 100%; 
} 

Но ничего не происходит, когда я вхожу в мышь, любая идея почему?

Идея что-то вроде этих JsFiddle

Answer 1

Вот пример использования части кода:

Просто модифицируют это ваш пример. Убедитесь, что вы используете одни и те же селекторы во всех аспектах кода.

$(document).ready(function() { 
 
    $(".header").mouseleave(function() { 
 
    $(this).stop().animate({ 
 
     height: "50px" 
 
    }, 600); 
 
    }); 
 

 
    $(".header").mouseenter(function() { 
 
    $(this).stop().animate({ 
 
     height: "100px" 
 
    }, 600); 
 
    }); 
 
});

.header { 
 
    width: 50px; 
 
    height:50px; 
 
    background-color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="header"> 
 
</div>