Tekst na obraz najechany myszą?

Próbuję uzyskać małe okienko, które pojawi się na dole po lewej stronie obrazu, gdy nad nim przesunie się mysz. Wewnątrz pudełka znajduje się link do innej strony.Tekst na obraz najechany myszą?

jest nieco podobny do tego, co chcę, ale pudełko jest mniejsze i nie jest połączone z ramką obrazu.

Próbowałem wszystkiego i nie mogę znaleźć odpowiedzi. I nie chcę używać podpowiedzi, nie mówiąc już o tym, że nie mam żadnej wiedzy o javascript. Naprawdę chcę, żeby to był CSS.

także obrazy Próbuję pracować można znaleźć right here.

Źródło

2013-01-04 alex r

i edytowane moją odpowiedź – Fabio

ta wykorzystuje :hover pseudoelement w 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.

Zamiast tego jest sposobem na osiągnięcie tego samego rezultatu za pomocą 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 Kod ery:

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

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

można umieścić kod jquery, gdzie chcesz, w ciała strony HTML, to trzeba to biblioteki jQuery w głowy takiego:

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

Możesz zobaczyć demo HERE.

Gdy chcesz go używać na swojej stronie, wystarczy zmienić wartość <img src /> i można dodać wiele obrazów i podpisów, wystarczy skopiować format i używany: Wstaw obraz z class="hover" i P z class="text"

Źródło

2013-01-04 00:47:27 Fabio

Dziękuję Fabio, to działa również, ale drugie jest proste. Zajmę się tym, gdy zacznę grać z javascriptem więcej :) –

jesteś mile widziany :) javascript jest podobny do java, jak możesz odgadnąć z nazwy, ale prostsze. Jeśli chcesz się tego nauczyć, polecam kurs, który można znaleźć na stronie codecademy.com. To nie jest nudne, musisz kodować podczas nauki. Poza tym jquery to framework javascript, który pozwala kodować potężne rzeczy w łatwiejszy sposób niż przy użyciu czystego javascript. Oficjalna dokumentacja jest dobrze zrobiona :) @alexr – Fabio

Oto jeden ze sposobów, aby to zrobić za pomocą 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

Lub jeśli po prostu chcesz go w lewym dolnym rogu:

Demo

Źródło

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

to działa, ale jest to sztuczka z użyciem krycie – Fabio

można użyj 'display: block' i' display: none' zamiast krycia, jeśli chcesz. Wolę jednak miłe przejście. – 3dgoo

tak, to prawda. Ma ładniejszy efekt. Nie wiedziałem, że możesz zmienić właściwości innego elementu po najechaniu myszą. Myślałem tylko tak samo. – Fabio

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

Źródło

2014-04-03 07:52:20 Benio

Nie jestem pewien co do przenośności, ale to zdecydowanie bardziej podoba. Zastanawiam się, czy ktoś potrafi wyczarować sposób na centrum :: przed/:: po tekście rzetelnie! – Lodewijk

Tekst na obraz najechany myszą?

Odpowiedz

Powiązane problemy