zmiana zawartości diva

pytanie zadane 13 sierpnia 2015 w JavaScript przez Lukasz Bywalec (2,320 p.)

Witam potrzebuje aby div zmienił zawartośc po najechaniu i wrócił do pierwotnej zawartości gdy z niego zjade. Przeglądając internet natknąłem sie na podobny temat: https://forum.pasja-informatyki.pl/18346/zmiana-zawartosci-diva-po-najechani-na-niego i tam na samym koncu jest taki kod: http://codepen.io/anon/pen/NqGBgJ

Nie znam JS i analizując kod zmieniłem go troche tak aby po najechaniu na div tel zniknęło fontello a pojawił sie numer telefonu ale nie umiem zrobić zeby po zjechaniu wróciło to fontello.

Potrzebuje aby było tak z divami tel i emial

Oto mój html:

<div class="pojemnik">
			<div class="tel"><i class="icon-phone"></i></div>
			<div class="fb"><i class="icon-facebook"></i></div>
			<div class="gplus"><i class="icon-gplus"></i></div>
			<div class="email"><i class="icon-mail-alt"></i></div>
		</div>

Liczę na pomoc :)

5 odpowiedzi

odpowiedź 13 sierpnia 2015 przez Hubert Murawski Stary wyjadacz (11,990 p.)

Wsytarczy, że stworzysz 2 divy, jeden z hoverem drugi natomiast z display:none, po najechaniu na hovera aktywuj tamtego diva.

<div id="jeden">
Lorem ipsum
<div id="dwa">Lorem ipsum</div>
</div>

css

#jeden{
position: relative;
}
#dwa{
position: absolute;
top: 0px;
left: 0px;
display: none;
}
#jeden:hover #dwa{
display: block;
}

komentarz 13 sierpnia 2015 przez Lukasz Bywalec (2,320 p.)

Ok działa dzięki tylko nie wiem jak dodac aby po najechaniu na diva jeden przayciemnił sie on bo gdy robie

#jeden:hover {jakies tam własciwosci} #dwa{ display block;}

a cos takiego

#jeden:hover {opacity:0.8;#dwa{display:block;}}

nie działa bo ne ma prawa

komentarz 13 sierpnia 2015 przez Hubert Murawski Stary wyjadacz (11,990 p.)

Tak to rozdziel:

#jeden{
position: relative;
}
#dwa{
position: absolute;
top: 0px;
left: 0px;
display: none;
}
#jeden:hover{
opacity:0.8;
}
#jeden:hover #dwa{
display: block;
}

komentarz 13 sierpnia 2015 przez Lukasz Bywalec (2,320 p.)

Gdy rodzielałem nic sie nie robiło. ten kod JS jakos przerobie i będe miał.

komentarz 13 sierpnia 2015 przez Hubert Murawski Stary wyjadacz (11,990 p.)

A co ustawiasz w divie? Pokaż kod ;)

komentarz 13 sierpnia 2015 przez KamilKulig Gaduła (3,670 p.)

A czy przypadkiem koledzie Łukaszowi nie chodzi o płynne zanikanie poprzedniego divu ( bądź płynne pojawianie się nowego ) ? CSS: Animation proponuje wtedy zobaczyć co z czym się je :)

komentarz 13 sierpnia 2015 przez Hubert Murawski Stary wyjadacz (11,990 p.)

Z tego co zrozumiałem, chyba nie. Jeżeli tak to wystarczy jak wspomniałeś CSS: Animation :)

odpowiedź 13 sierpnia 2015 przez s92 Bywalec (2,300 p.)

Poczytaj o CSS a dokładnie o selektorze :hover

komentarz 13 sierpnia 2015 przez Lukasz Bywalec (2,320 p.)

w hover moge zmienić jakby własciwosci diva ale nie zawartosc

komentarz 13 sierpnia 2015 przez Wiciorny Ekspert (270,190 p.)

możesz zmienić zawartość ewentualnie http://kodcss.pl/kurs-css/selektory/pseudoklasy/selektor-active zastosuj :Active, troszke inaczej działa.

Jeżeli jednak nie, to polecam stronkę w linku ;] tam znajdziesz pseudo klase dla siebie

odpowiedź 13 sierpnia 2015 przez Wiciorny Ekspert (270,190 p.)
edycja 13 sierpnia 2015 przez Wiciorny

A nie chodzi Ci: np. w stlach Css.. dla diva zapisać

.pojemnik:hover ( po najechaniu kursorem )?

{

tutaj definiujesz zmiane koloru itp. czyli właściowości dla diva.

co do zmiany wartosci to użyj "content" ;] polecam sprawdzić w google zawartość diva no i zmienić go pod swoje oczekiwania

}

czytelnie jako kod :

.pojemnik:hover
{

/* definiujesz co potrzebujesz */ 
/* polecam stosować content- i display manipuluje widocznoscia oraz zawartoscia */

}

EWENTUALNIE : TU MASZ http://forum.webhelp.pl/css/zmiana-zawartosci-div-po-najechaniu-na-link-t160025.html

generalnie manipulujesz diva tak, aby był potomkiem linka, i przy użyciu hover wtedy na 100 pro zadziała

komentarz 13 sierpnia 2015 przez Lukasz Bywalec (2,320 p.)

Nie do konca w pojemniku mam 4 divy i tylko 2 z nich maja zmieniac swoja zawartość. i czy nie mozna byłoby przerobić ten kod aby zadziałało

var overflow = 0, url_img = "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTIOfdLCw7_zgmUY5Xo91CKHKZhXCm99V0Eu_4rpvSC1oFtiCAKLg";



$(document).ready(function(){
      $("#cont").hover(function(){
          if(overflow++ <= 1) {
            if(overflow <= 1) {
          		$("#img_cont").fadeOut(180, function() {
              		$("#img_cont").html("Jakiś tekst");
              		$("#img_cont").fadeIn(180);
       				});
            }
          }
    }, function(){
        overflow=0;
        $("#img_cont").fadeOut(180, function() {
     		$("#img_cont").html('');
 		 		var $img = $('<img/>').attr('src', url_img);
 		 		$("#img_cont").append($img);
 				$("#img_cont").fadeIn(180);
  	});
    });
});

odpowiedź 14 sierpnia 2015 przez Lukasz Bywalec (2,320 p.)

Juz mam przerobiony kod.

To jest html:

<div class="pojemnik">
			<div class="tel"><i class="icon-phone"></i></div>
			<div class="fb"><i class="icon-facebook"></i></div>
			<div class="gplus"><i class="icon-gplus"></i></div>
			<div class="email"><i class="icon-mail-alt"></i></div>
		</div>

A tutaj kod Js

var overflow = 0;
$(document).ready(function(){
      $(".tel").hover(function(){
          if(overflow++ <= 1) {
            if(overflow <= 1) {
          		$(".tel").fadeOut(100, function() {
              		$(".tel").html('');
					$(".tel").append('Nr_telefonu')
              		$(".tel").fadeIn(200);
       				});
            }
          }
    }, function(){
        overflow=0;
        $(".tel").fadeOut(100, function() {
     		$(".tel").html('');
 		 		$(".tel").append('<i class="icon-phone"></i>');
 				$(".tel").fadeIn(200);
  	});
    });
});

Tutaj jest do zmianiania zawartości .tel i nizej jest jeszcz identyczny ale zamiast .tel mam .emial