Jquery Augmentation de la taille de la div sur le vol stationnaire?

Comment augmenter la taille de la div sur le vol stationnaire? Tous les div ont le même nom de classe, il est créé de façon dynamique. J'ai essayé ce code:

<script type="text/javascript">
$('.resultitem').bind('mouseover', function() {
    $(this).addClass('hovers');
    $('.resultitem').not('.hover').css({ opacity: 0.3 });
});
$('.resultitem').bind('mouseout', function() {
    $('.resultitem').removeClass('hovers').fadeTo('normal',1);
});
</script>

<style type="text/css">
.hovers {
    width:300px;
    height:400px;
}
img.hovers {
    width:300px;
    height:300px;
}
</style>

Il change l'alignement des autres div?

  • S'il vous plaît montrer votre html aussi.
InformationsquelleAutor nagaking | 2013-04-03
  1. 12

    Utiliser CSS3 transform: scale(1.1)

    CSS:

    .resultitem{
  width:150px;
  height:150px;
  background:#48e;
  -webkit-transition: 0.5s;
          transition: 0.5s;
}

.resultitem:hover{
  background:#59f;
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

    HTML:

    <div id="parent">
  <img class="resultitem" />
  <img class="resultitem" />
  <img class="resultitem" />
  <img class="resultitem" />
  <img class="resultitem" />
  <img class="resultitem" />
</div>

    • Merci.. j'ai essayé ce code que de temps passez div affiche ci-dessous pour d'autres div? je veux que ressembler à un google images?
    • ajout d'une démo, prendre un coup d'oeil
    • goo.gl/Sd9Wz voir ce lien sur Internet Exlporer. Si nous déplaçons le curseur sur l'image, c'est la taille de l'image accrue sur les autres images.
    • oh, manqué cette partie, vous pouvez le faire dans le plus pur CSS3
    • Merci..Sa a fonctionné.
    • Sa fonctionne pas sur Internet Explorer ancienne version ..Est-il d'autres options?

    InformationsquelleAutor Roko C. Buljan
  2. 1

    Est là une raison quelconque vous n'êtes pas à l'aide de la plaine CSS?

    jsFiddle

    .sizeMe {
    width:300px;
    height:300px;
    background-color:#F00;
    opacity:0.3;
    /* use 'opacity 1s ease' for just opacity */
    -webkit-transition:all 1s ease;
    -moz-transition:all 1s ease;
    transition:all 1s ease;
}
.sizeMe:hover {
    height:400px;
    opacity:1;
}
    • Car les navigateurs ne prennent pas en charge certaines transitions (<=IE9).
    InformationsquelleAutor Daniel Imms
  3. 1

    Essayer cette
    jquery 

    $("#div1").hover(function () {
                $("#div1").addClass("divclass");
            }, function () {
                $("#div1").removeClass("divclass");
            });

    html

               <div id="div1" >
            HTML borders are best created with CSS.
</div>

    style

    <style>
.divclass{width:200px;height:100px;border:1px solid blue;}
</style>
    InformationsquelleAutor meer
  4. 0

    Utiliser Les Css

    add $(this).addClass('resize');

.resize:hover {
    width:Xpx;
    height:Ypx
}
    InformationsquelleAutor Suresh Atta