Kaip padaryti hover efektą ant to boxo ant kurio užhoverinta.Jquery.

.

kodą įdėk.. ne aiškiaregiai gi mes

kodą įdėk.. ne aiškiaregiai gi mes

https://jsfiddle.net/y3edxrgx/ Blemba pamiršau :D

$(document).ready(function () {
  $(".Box").hover(function() {
     $(this).find(".Description").removeClass("Out").addClass("In");
  }, function () {
     $(this).find(".Description.In").addClass("Out").removeClass("In");
  });
});

Bet čia nesąmonė yra daryti tokius dalykus su js, galima be problemų išsiversti vien tik su css.

Juk parases $(".Box").hover(function() { // kad uzsklanda atsirastu ant visu, pasirink butent ta ant kurio event atsiras su 'this'. Kazkaip taip $(this).children().addClass("In");

Na ideja bent tokia turetu but.

Vienas dalykas .hover funkcija cia nelabai gerai naudoti. Geriau butu

.on("hover", function() {});

kitas dalykas apskritai jQuery tokiam reikaluj, galetu naudoti, kas nesupranta CSS'o, tada klausimas kaip jis ta jQuery naudoja ir kaip ten susigaudo jame apskritai.. Naudojant jQuery yra labai svarbu zinoti, ko nereiketu su juo daryti.. Cia butent toks atvejis.

CSS pvz:

.hover-container {
 background:#fff;
 width:250px;
 height:250px;
}
.hidden-element {
 display:none;
}
.hover-container:hover > .hidden-element {
 display:block;
}
<div class="hover-container">
 <div class="hidden-element">test</div>
</div>

https://jsfiddle.net/uLurq6d2/

Vienas dalykas .hover funkcija cia nelabai gerai naudoti. Geriau butu

.on("hover", function() {});

kitas dalykas apskritai jQuery tokiam reikaluj, galetu naudoti, kas nesupranta CSS'o, tada klausimas kaip jis ta jQuery naudoja ir kaip ten susigaudo jame apskritai.. Naudojant jQuery yra labai svarbu zinoti, ko nereiketu su juo daryti.. Cia butent toks atvejis.

 

CSS pvz:

 

.hover-container {
 background:#fff;
 width:250px;
 height:250px;
}
.hidden-element {
 display:none;
}
.hover-container:hover > .hidden-element {
 display:block;
}
<div class="hover-container">
 <div class="hidden-element">test</div>
</div>

 

https://jsfiddle.net/uLurq6d2/

Nu sorry profesoriau :D Bet Jquery naudojau dėl to, kad būtų animationas kai boxas kyla ir kai leidžias. Su css aš kai bandžiau man su hover tik pakildavo, kad nusileistų man niekaip to neišėjo padaryti. :)

Okey.. Truputis korekcijus ir prasau:

.hover-container {
 position:relative;
 display:inline-block;
 background:#fff;
 width:250px;
 height:250px;
 overflow:hidden;
}
.hidden-element {
 position:absolute;  
 height:1px;
 bottom:0;
 -webkit-transition: all 1s ease;
 -moz-transition: all 1s ease;
 -o-transition: all 1s ease;
 transition: all 1s ease;
}
.hover-container:hover > .hidden-element {
 height:100px;
 bottom:0px;
}

<div class="hover-container">
 <div class="hidden-element">
   <p> test </p>
 </div>
</div>

https://jsfiddle.net/uLurq6d2/5/

Okey.. Truputis korekcijus ir prasau:

 

.hover-container {
 position:relative;
 display:inline-block;
 background:#fff;
 width:250px;
 height:250px;
 overflow:hidden;
}
.hidden-element {
 position:absolute;  
 height:1px;
 bottom:0;
 -webkit-transition: all 1s ease;
 -moz-transition: all 1s ease;
 -o-transition: all 1s ease;
 transition: all 1s ease;
}
.hover-container:hover > .hidden-element {
 height:100px;
 bottom:0px;
}

<div class="hover-container">
 <div class="hidden-element">
   <p> test </p>
 </div>
</div>

 

https://jsfiddle.net/uLurq6d2/5/

Čia tikrai ne "right-way to do it" :)