[css] Hover odnosnika z pozycjonowaniem absolutnym, nie działa w operze Opcje

[krzywy36]

Tytuł raczej dużo nie mówi, ale chodzi o to, że chcę uzyskać efekt przyciemniania obrazków po najechaniu na nie kursorem.
Założenie było takie, że wstawiam w diva odnośnik i obrazek, odnośnik pozycjonuję absolutnie, szerokość i wysokość ustawiam na odpowiadające wartości z obrazka i przy najechaniu kursorem za pomocą :hover, ustawiam tło odnośnika na półprzezroczysty png. Wszystko działa pięknie w chrome i firefoxie, problem występuje w operze, tam odnośnik jest cały czas jakby pod obrazkiem i w ogóle nie można w niego kliknąć więc efekt hover też się nie aktywuje. Jakieś pomysły jak to naprawić? z-index nie pomaga.

Edit: jeśli nie będzie możliwości naprawić tego w css, to może jakieś rozwiązanie w js?

Ten post edytował krzywy36 1.05.2011, 15:14:16

[Bags_Bunny]

O ile dobrze zrozumiałem o co Ci chodzi, może po prostu ustaw czarne tło pod obrazkiem i zmieniaj opacity?

Ten post edytował Bags_Bunny 1.05.2011, 16:25:16

[krzywy36]

opacity działa we wszystkich przeglądarkach?

Edit: tak czy siak, nie rozwiązuje to do końca mojego problemu, bo nie napisałem w pierwszym poście, ale na innym obrazku chcę zrobić to samo, z tym że w dodatku ma się wyświetlać na nim tekst.

Ten post edytował krzywy36 1.05.2011, 17:32:14

[r4xz]

ciągle opacity rozwiązuje twój problem.

[MrCoody]

Spróbuj obrazek w CSSie
NP.:

[HTML] pobierz, plaintext 
<div id="obrazek"><a href="#">Odnośnik</a></div>
[HTML] pobierz, plaintext 

KOD CSS 3 - box-shadow:

#obrazek {; width: 400px; height: 300px; position: absolute; top: 0px; left: 100px; text-align: center;}

#obrazek:hover { width: 400px; height: 300px; position: absolute; top: 0px; left: 100px; text-align: center; -moz-box-shadow: inset 100px 100px 100px #999;-0-box-shadow: inset 100px 100px 100px #999;-webkit-box-shadow: inset 100px 100px 100px #999;box-shadow: inset 100px 100px 100px #999;}

a {text-decoration:none; color: green; font-weight: bold; cursor:default;}

a:hover {color: lime;}

Kombinuj z tym box-shadow żeby był efekt przejścia możesz zastosować też funkcję "transition"
Przykład :
-webkit-transition:All 0.3s ease-in-out;
-moz-transition:All 0.3s ease-in-out;
-o-transition:All 0.3s ease-in-out;


Ten post edytował MrCoody 1.05.2011, 17:46:07

[krzywy36]

@r4xz w drugim wypadku opacity nie rozwiązuje mojego problemu, wrzucę przykładowy kod, żeby to zobrazować:

[HTML] pobierz, plaintext 
<div id="photo">
    <a href="#">Przykladowy tekst</a>
    <img src="#" />
</div>
[HTML] pobierz, plaintext 

[CSS] pobierz, plaintext 
#photo
{
    position: relative;
    height: 400px;
    width: 400px;
}
#photo a
{
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    color: transparent;
}
#photo a:hover
{
    color: #fff;
}
[CSS] pobierz, plaintext 

o ile w przypadku zwykłego obrazka mogę zastosować hover dla samego img to w tym wypadku, żeby pokazać tekst muszę zrobić hover dla <a>, no a jak już pisałem <a> w oprzerze jest wyświetlane jakby pod obrazkiem.

@MrCoody, css3 narazie sobie odpuszcze z wiadomych powodów.

Ten post edytował krzywy36 1.05.2011, 18:15:09

[MrCoody]

dodaj może #photo: hover np.:

[CSS] pobierz, plaintext 
#photo:hover
{  background: black;
    position: relative;
    height: 400px;
    width: 400px;
}
[CSS] pobierz, plaintext 

Nak najedziesz na obrazek to tło się zmieni na czarne (IMG:style_emoticons/default/biggrin.gif)

ALBO :

[CSS] pobierz, plaintext 
img:hover
{  background: black;
    position: relative;
    height: 400px;
    width: 400px;
}
[CSS] pobierz, plaintext 

Jak nie działa to nie wiem o co Ci chodzi (IMG:style_emoticons/default/smile.gif)

Ten post edytował MrCoody 1.05.2011, 19:00:31

[Bags_Bunny]

Daj #photo czarne tło, wrzuć obrazek i tekst w dodatkowy div i rób hover dla tego dodatkowego diva.

[MrCoody]

mogło by być też w js np.:

w headzie :

[JAVASCRIPT] pobierz, plaintext 
<script type="text/javascript">
function startIt() {
	var oImg = document.getElementById('image');
	oImg.style.bgcolor = 'black';
}
 
function stopIt() {
	var oImg = document.getElementById('image');
		oImg.style.bgcolor = '';
}
</script>
[JAVASCRIPT] pobierz, plaintext 

i kod w htmlu :

[HTML] pobierz, plaintext 
<img onmouseover="startIt()" onmouseout="stopIt()" id="image" src="zdjecie.jpg" />
[HTML] pobierz, plaintext 

POMOGŁEM (IMG:style_emoticons/default/questionmark.gif)

Ten post edytował MrCoody 2.05.2011, 17:48:33