Văn bản trên hình ảnh di chuột qua?

Tôi đang cố gắng để có được một hộp nhỏ xuất hiện ở phía dưới cùng bên trái của một hình ảnh khi một con chuột di chuyển qua nó. Bên trong hộp sẽ có một liên kết đến một trang khác.Văn bản trên hình ảnh di chuột qua?

Here tương tự như những gì tôi muốn, nhưng hộp phải nhỏ hơn và không được kết nối với đường viền của hình ảnh.

Tôi đã thử mọi thứ và không thể tìm thấy câu trả lời. Và tôi không muốn sử dụng tooltip, hãy để một mình thực tế là tôi không có kiến thức javascript nào. Tôi thực sự muốn đây là CSS.

Ngoài ra những hình ảnh tôi đang cố gắng để làm việc với có thể được tìm thấy right here.

Nguồn

2013-01-04 alex r

tôi sửa câu trả lời của tôi – Fabio

này được sử dụng :hover pseudoelement trong CSS3.

HTML:

<div id="wrapper"> 
    <img src="http://placehold.it/300x200" class="hover" /> 
    <p class="text">text</p> 
</div>

CSS:

#wrapper .text { 
position:relative; 
bottom:30px; 
left:0px; 
visibility:hidden; 
} 

#wrapper:hover .text { 
visibility:visible; 
}

Demo HERE.

này thay vào đó là một cách để đạt được kết quả tương tự bằng cách sử dụng jquery:

HTML:

<div id="wrapper"> 
    <img src="http://placehold.it/300x200" class="hover" /> 
    <p class="text">text</p> 
</div>

CSS:

#wrapper p { 
position:relative; 
bottom:30px; 
left:0px; 
visibility:hidden; 
}

jqu đang ery:

$('.hover').mouseover(function() { 
    $('.text').css("visibility","visible"); 
}); 

$('.hover').mouseout(function() { 
    $('.text').css("visibility","hidden"); 
});

Bạn có thể đặt mã jquery nơi bạn muốn, trong cơ thể của trang HTML, sau đó bạn cần phải bao gồm các thư viện jquery trong đầu như thế này:

<head> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
</head>

Bạn có thể xem bản trình diễn HERE.

Khi bạn muốn sử dụng nó trên trang web của bạn, chỉ cần thay đổi giá trị <img src /> và bạn có thể thêm nhiều hình ảnh và chú thích, chỉ cần sao chép định dạng i sử dụng: hình ảnh chèn với class="hover" và p với class="text"

Nguồn

2013-01-04 00:47:27 Fabio

Cảm ơn Fabio, tính năng này cũng hoạt động tốt, nhưng ứng dụng còn lại rất đơn giản. Tôi sẽ xem xét điều này khi tôi bắt đầu chơi với javascript nhiều hơn :) –

bạn được chào đón :) javascript tương tự như java như bạn có thể đoán từ tên, nhưng đơn giản hơn. Nếu bạn muốn tìm hiểu nó, tôi khuyên bạn nên khóa học mà bạn có thể tìm thấy tại codecademy.com. Nó không phải là một nhàm chán, bạn phải viết mã trong khi học tập. Bên cạnh đó jquery là một khuôn khổ javascript cho phép bạn mã những thứ mạnh mẽ một cách dễ dàng hơn bằng cách sử dụng javascript tinh khiết. Tài liệu chính thức cũng được thực hiện :) @alexr – Fabio

Dưới đây là một cách để làm điều này bằng css

HTML

<div class="imageWrapper"> 
    <img src="http://lorempixel.com/300/300/" alt="" /> 
    <a href="http://google.com" class="cornerLink">Link</a> 
</div>

CSS

.imageWrapper { 
    position: relative; 
    width: 300px; 
    height: 300px; 
} 
.imageWrapper img { 
    display: block; 
} 
.imageWrapper .cornerLink { 
    opacity: 0; 
    position: absolute; 
    bottom: 0px; 
    left: 0px; 
    right: 0px; 
    padding: 2px 0px; 
    color: #ffffff; 
    background: #000000; 
    text-decoration: none; 
    text-align: center; 
    -webkit-transition: opacity 500ms; 
    -moz-transition: opacity 500ms; 
    -o-transition: opacity 500ms; 
    transition: opacity 500ms; 

} 
.imageWrapper:hover .cornerLink { 
    opacity: 0.8; 
}

Demo

Hoặc nếu bạn chỉ muốn nó ở góc dưới bên trái:

Demo

Nguồn

2013-01-04 00:37:20 3dgoo

làm việc này, nhưng đó là một thủ thuật sử dụng opacity – Fabio

Bạn có thể sử dụng 'display: block' và' display: none' thay vì opacity nếu bạn muốn. Tôi thích có sự chuyển tiếp tốt đẹp hơn. – 3dgoo

có đúng. Nó có hiệu ứng đẹp hơn. Tôi không biết bạn có thể thay đổi các thuộc tính của phần tử khác trên di chuột. Tôi chỉ nghĩ như vậy. – Fabio

Sử dụng :hover::before pseudooclass

.round-pic2:hover::before{ 
    content: 'text'; 
    position: relative; 
    top: 60px; 
    left: 50px; 
    width: 30px; 
    height: 20px; 
    text-align: center; 
    display: inline-block; 
}

JSFiddle

Nguồn

2014-04-03 07:52:20 Benio

Không chắc chắn về tính di động, nhưng điều này chắc chắn là giống như nó. Tự hỏi, nếu ai đó có thể gợi ra một cách để trung tâm :: trước/:: sau khi văn bản đáng tin cậy! – Lodewijk

Văn bản trên hình ảnh di chuột qua?

Trả lời

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