Pokaż zawartość po najechaniu na DIV

Czy można wyświetlać zawartość po najechaniu kursorem na DIV. Patrz: Image Pokaż zawartość po najechaniu na DIV

Po umieszczeniu wskaźnika myszy nad elementem div następuje przejście, ale czy jest możliwe wyświetlenie zawartości wewnątrz dubka, np. Obrazy etc

html:

<div class="flowingdown"> 

</div>

CSS3:

.flowingdown { 
    width:1045px; 
    background-image:url(images/vertical_cloth.png); 
    height:50px; 
    float:left; 
    margin-top:2px; 
    margin-bottom:2px; 
    border-radius:0 0 55px 55px ; 
    transition: height 1s; 
    -webkit-transition: height 1s; 


} 

.flowingdown:hover { 
    height:100px; 
}

Źródło

2013-07-25 Farhan Afzal

Twoje pytanie jest bardzo mylące. Co za miejsce transkrypcji. Jakie jest dokładne pytanie? – AnaMaria

Załóżmy masz następujące znaczniki:

<div id="parent"> 
    Some content 
    <div id="hover-content"> 
     Only show this when hovering parent 
    </div> 
</div>

CSS:

#hover-content { 
    display:none; 
} 
#parent:hover #hover-content { 
    display:block; 
}

To powinno załatwić sprawę.

Nie wiem, jak to zrobić z przejściami, ale trzeba by ustawić co najmniej ten sam selektor.

Example

Źródło

2013-07-25 13:12:34 Anpan

Awesome, załatwiłeś sprawę. Przyjmę za kilka minut. –

@FarhanAfzal jest to wersja przejściowa, jeśli zainteresowany: http://jsfiddle.net/5Bpur/1/ – Albzi

Jako dodatkowa uwaga: Możesz zastosować dowolny styl w ten sposób.Jedynym wymaganiem jest to, że elementem, na który chcesz wpłynąć, jest dziecko (lub najbliższe rodzeństwo z selektorem '+') elementu, na którym się unosisz. – Anpan

Jeżeli za powiedzmy, masz ten kontekst:

<div class="flowingdown"> 
    <div class="something-inside"> 
     something-inside 
    </div> 
    <div class="something-inside-but-hidden"> 
     something-inside-but-hidden 
    </div> 
</div>

CSS

.something-inside-but-hidden {display:none} 
.flowingdown:hover .something-inside-but-hidden {display:block}

przykład Praca jsFiddled here

Źródło

2013-07-25 13:11:46

Tak, jest to możliwe.

Ale zawiń swój .flowingdown w div. Inorder aby pokazać całą zawartość,

<div style="width: 200px; height:300px;"> 
    <div class="flowingdown"></div> 
</div>

CSS:

.flowingdown { 
    width:1045px; 
    background-image:url(http://i.imgur.com/hHUa9Ty.jpg); 
    height:50px; 
    float:left; 
    margin-top:2px; 
    margin-bottom:2px; 
    border-radius:0 0 55px 55px; 
    transition: height 1s; 
    -webkit-transition: height 1s; 
} 
.flowingdown:hover { 
    height:100%; //Inorder to show the entire content within the parent. 
}

Sprawdź to JSFiddle

Źródło

2013-07-25 13:15:35 Praveen

Zakładam, że jesteś stara się ukryć dolną połowę tle wizerunku, ale właśnie przetestowałem ten dokładny kod i działało bez zarzutu:

<html> 
<head> 
<style> 

.flowingdown { 
    width:1045px; 
    background-image:url(../Pictures/C_2560x1400.jpg); 
    height:50px; 
    float:left; 
    margin-top:2px; 
    margin-bottom:2px; 
    border-radius:0 0 55px 55px ; 
    transition: height 1s; 
    -webkit-transition: height 1s; 


} 

.flowingdown:hover { 
    height:100px; 
} 
</style> 
</head> 
<body> 

<div class="flowingdown"> 

</div> 

</body>

To ten sam dokładny kod, którego użyłem, z wyjątkiem tego, że użyłem własnego wizerunku.

Jeśli to, co chcesz, aby zmienić obraz tła przy aktywowaniu, Twój CSS powinno być:

.flowingdown:hover { 
    height:100px; 
    background-image:url(path.jpg); 
}

Daj mi znać, jeśli źle zrozumiałem pytanie.

Źródło

2013-07-25 13:26:15 Jacques

Pokaż zawartość po najechaniu na DIV

Odpowiedz

Powiązane problemy