Hiển thị nội dung khi di chuột qua DIV

Có thể hiển thị nội dung khi di chuột qua DIV hay không. Xem Image Hiển thị nội dung khi di chuột qua DIV

Khi tôi di chuột qua div, quá trình chuyển đổi diễn ra, nhưng có thể hiển thị nội dung bên trong div lơ lửng, tức là. Hình ảnh vv

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; 
}

Nguồn

2013-07-25 Farhan Afzal

Câu hỏi của bạn rất khó hiểu. Những gì transtition taks diễn ra. Câu hỏi chính xác là gì? – AnaMaria

Giả sử bạn có đánh dấu sau:

<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; 
}

này nên làm các trick.

Không chắc chắn bạn sẽ làm như thế nào với chuyển tiếp, nhưng bạn phải đặt cùng một bộ chọn ít nhất.

Example

Nguồn

2013-07-25 13:12:34 Anpan

Tuyệt vời, đã làm các trick. Sẽ chấp nhận sau vài phút nữa. –

@FarhanAfzal đây là phiên bản chuyển tiếp nếu quan tâm: http://jsfiddle.net/5Bpur/1/ – Albzi

Lưu ý bổ sung: Bạn có thể áp dụng bất kỳ kiểu nào bạn muốn theo cách này.Yêu cầu duy nhất là phần tử bạn muốn tác động là một đứa trẻ (hoặc anh chị em trực tiếp với bộ chọn '+') của phần tử bạn đang lơ lửng. – Anpan

Nếu, mỗi tiếng nói, bạn có bối cảnh này:

<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}

dụ làm việc jsFiddled here

Nguồn

2013-07-25 13:11:46

Có, có thể.

Nhưng hãy bọc .flowingdown trong div. Inorder để hiển thị toàn bộ nội dung,

<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. 
}

Kiểm tra này JSFiddle

Nguồn

2013-07-25 13:15:35 Praveen

tôi giả sử bạn đang cố gắng để che giấu nửa dưới của background-image, nhưng tôi vừa thử nghiệm mã chính xác này và nó hoạt động tốt:

<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>

Đó là mã chính xác mà bạn đã sử dụng, ngoại trừ tôi đã sử dụng hình ảnh của riêng mình.

Nếu những gì bạn muốn là để thay đổi hình nền trên di chuột, CSS của bạn nên là:

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

Hãy cho tôi biết nếu tôi hiểu lầm câu hỏi của bạn.

Nguồn

2013-07-25 13:26:15 Jacques

Hiển thị nội dung khi di chuột qua DIV

Trả lời

Các vấn đề liên quan