Obrazki przesuwają się w lewo i po najechaniu kursorem na dany obrazek - brak tooltip'a

Question

Witam.

Obrazki przesuwają się powoli w lewo i po najechaniu kursorem na dany obrazek, niestety nie wyświetla się tooltip. Co muszę poprawić w kodzie, aby wyświetlił się tooltip?

<div class="photobanner">
	<div id="photoSlider">
		<div class="photos">
			<img src="obrazki/01.jpg" class="tooltip" style="margin-top: 12px" /><span>Obrazek nr 01</span>
			<img src="obrazki/02.jpg" class="tooltip" style="margin-top: 12px" /><span>Obrazek nr 02</span>
			<img src="obrazki/03.jpg" class="tooltip" style="margin-top: 12px" /><span>Obrazek nr 03</span>
			<img src="obrazki/04.jpg" class="tooltip" style="margin-top: 12px" /><span>Obrazek nr 04</span>
			<img src="obrazki/05.jpg" class="tooltip" style="margin-top: 12px" /><span>Obrazek nr 05</span>
			<img src="obrazki/06.jpg" class="tooltip" style="margin-top: 12px" /><span>Obrazek nr 06</span>
			<img src="obrazki/07.jpg" class="tooltip" style="margin-top: 12px" /><span>Obrazek nr 07</span>
			<img src="obrazki/08.jpg" class="tooltip" style="margin-top: 12px" /><span>Obrazek nr 08</span>
			<img src="obrazki/09.jpg" class="tooltip" style="margin-top: 12px" /><span>Obrazek nr 09</span>
			<img src="obrazki/10.jpg" class="tooltip" style="margin-top: 12px" /><span>Obrazek nr 10</span>
		</div>
	</div>
</div>

.photobanner
{
	overflow: hidden;
	position: relative;
	bottom: 138px;
	width: 900px;
	margin-left: auto;
	margin-right: auto;
	background-color: #0000FF;
}

#photoSlider
{
	width: 1100px;
	height: 124px;
}

#photoSlider img
{
	width: 200px;
	height: 100px;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

#photoSlider img:hover
{
	-webkit-transform: scale(1.2,1.2);
	-moz-transform: scale(1.2,1.2);
	-o-transform: scale(1.2,1.2);
	-ms-transform: scale(1.2,1.2);
	transform: scale(1.2,1.2);
	cursor: pointer;
}

.photos
{
	-webkit-animation: bannermove 400s linear infinite;
	-moz-animation: bannermove 400s linear infinite;
	-ms-animation: bannermove 400s linear infinite;
	-o-animation: bannermove 400s linear infinite;
	animation: bannermove 400s linear infinite;
}

@keyframes bannermove
{
	0% {margin-left: 0px;}
	100% {margin-left: -9064px;}
}

@-moz-keyframes bannermove
{
	0% {margin-left: 0px;}
	100% {margin-left: -9064px;}
}

@-webkit-keyframes bannermove
{
	0% {margin-left: 0px;}
	100% {margin-left: -9064px;}
}

@-ms-keyframes bannermove
{
	0% {margin-left: 0px;}
	100% {margin-left: -9064px;}
}

@-o-keyframes bannermove
{
	0% {margin-left: 0px;}
	100% {margin-left: -9064px;}
}

#photoSlider img .tooltip
{
	position: relative;
	z-index: 20;
}

#photoSlider img .tooltip span
{
	display: none;
}

#photoSlider img .tooltip:hover
{
	z-index: 21;
}

#photoSlider img .tooltip:hover span
{
	display: block;
	width: 100px;
	padding: 5px;
	color: #FFF;
	background: #535663;
	font-size: 11px;
	text-decoration: none;
	position: absolute;
	border-radius: 6px;
	top: 10px;
	left: -10px;
}

Ciekawostka:

Podałem w kodzie 10 zdjęć, ponieważ nie chciałem wpisywać za dużo kodu. Jak chcecie przekonać się jak wygląda prawidłowy efekt przesuwanych zdjęć w lewo w nieskończoność, to musicie umieścić łącznie 49 zdjęć.

Czyli 44+5:

<img src="obrazki/01-44.jpg">
<img src="obrazki/01-05.jpg">

oraz usunąć z kodu:

<class="tooltip"><span>Obrazek nr 01-44 + 01-05</span>

Do tej ilości zdjęć dopasowana jest szybkość klatek przesuwania z powtórzeniami w nieskończoność.

Answer 1

Nie wyświetlają się, ponieważ masz źle skonstruowany selektor.
 

#photoSlider img .tooltip:hover span

Po pierwsze, img ma klasę tooltip, więc stawiam, że chodzi Ci o img, a nie jego dziecko, które ma klasę .tooltip.
Jeżeli chcesz odwołać się do zdjęcia to wystarczy img, img.tooltip, lub img.tooltip. Możesz sobie wybrać.

Po drugie, span nie jest dzieckiem img, więc napisanie, że szukamy go w img jest błędem.
Na szczęście w CSS-ie możemy użyć ~ (an F element preceded by an E element)

Poprawny selektor to:

#photoSlider .tooltip:hover ~ span

P.S. Nawet spanów nie ukrywasz :)

 

Comments

Wprowadziłem trochę zmian w CSS i są duże postępy, ale niestety nie jest do końca tak jak powinno. Nie ma efektu końcowego. Po najechaniu na dany obrazek, tooltip pojawia się na środku w stanie nieruchomym w obszarze przesuwanych obrazków. Byłoby super, gdyby pojawił się tylko przy danym obrazku, na którego najeżdża się kursorem.

Aktualny CSS wygląda tak:

#photoSlider .tooltip ~ span
{
	display: none;
}

#photoSlider .tooltip:hover ~ span
{
	display: block;
	width: 100px;
	padding: 5px;
	color: #FFF;
	background: #535663;
	font-size: 11px;
	text-decoration: none;
	position: absolute;
	border-radius: 6px;
	top: 50px;
	left: 400px;
}

Co muszę jeszcze poprawić w CSS?

---

Zrobiłem to zupełnie innym sposobem. Użyłem HTML + CSS + JS:

<div class="photobanner">
    <div id="photoSlider">
        <div class="photos">
            <img src="obrazki/01.jpg" class="masterTooltip" title="Obrazek nr 01" style="margin-top: 12px" />
            <img src="obrazki/02.jpg" class="masterTooltip" title="Obrazek nr 02" style="margin-top: 12px" />
            <img src="obrazki/03.jpg" class="masterTooltip" title="Obrazek nr 03" style="margin-top: 12px" />
            <img src="obrazki/04.jpg" class="masterTooltip" title="Obrazek nr 04" style="margin-top: 12px" />
            <img src="obrazki/05.jpg" class="masterTooltip" title="Obrazek nr 05" style="margin-top: 12px" />
            <img src="obrazki/06.jpg" class="masterTooltip" title="Obrazek nr 06" style="margin-top: 12px" />
            <img src="obrazki/07.jpg" class="masterTooltip" title="Obrazek nr 07" style="margin-top: 12px" />
            <img src="obrazki/08.jpg" class="masterTooltip" title="Obrazek nr 08" style="margin-top: 12px" />
            <img src="obrazki/09.jpg" class="masterTooltip" title="Obrazek nr 09" style="margin-top: 12px" />
            <img src="obrazki/10.jpg" class="masterTooltip" title="Obrazek nr 10" style="margin-top: 12px" />
        </div>
    </div>
</div>

.tooltip
{
	display: none;
	position: absolute;
	border: 1px solid #333;
	background-color: #161616;
	border-radius: 5px;
	padding: 10px;
	color: yellow;
}

<script type="text/javascript">
	$(document).ready(function() {
		$('.masterTooltip').hover(function(){
				var title = $(this).attr('title');
				$(this).data('tipText', title).removeAttr('title');
				$('<p class="tooltip"></p>')
				.text(title)
				.appendTo('body')
				.fadeIn('slow');
		}, function() {
			$(this).attr('title', $(this).data('tipText'));
			$('.tooltip').remove();
		}).mousemove(function(e) {
			var mousex = e.pageX + 20;
			var mousey = e.pageY + 10;
			$('.tooltip')
			.css({ top: mousey, left: mousex })
		});
	});
</script>

Teraz działa jak należy. Po najechaniu kursorem na obszar danego obrazka, pojawia się tooltip z info.