Alle links div kleur veranderen - Softwareontwikkeling

zondag 13 juli 2008 22:01

Acties:

Verwijderd

Topicstarter

Hey

Ik zit al een tijdje met dit probleem, normaal als ik een div heb met een link erin en ik wil dat de achtergrondkleur+textkleur verandert van de div, dan gebruik ik display:block en a:hover { background-color:black; color:white; }.

Maar nu heb ik hetvolgende, waarbij dit niet werkt :
Ik heb dus een container div die is opgedeeld in 3 andere divs. Nu wil ik dat als je je muis op de container div houdt, dat de achtergrondkleur+textkleur veranderen.
Nu heb ik de volgende code :

code:

#thumbs li a:hover {
    color:white;
        background-color:black;
}

Nu verandert alleen de kleur van de link waarop ik mijn muis houd,
ook als ik display:block erbij zet, krijg ik het gewenste resultaat niet.
Alle links gaan naar 1 pagina.
Dus als je je muis op de container div houdt, moet de kleur van de alle links/text in de div veranderen en niet alleen van 1 link(veranderen van achtergrondkleur werkt al).
Weet iemand hoe ik dit kan doen?

Ik heb hier op tweakers en google gezocht, ik had wel een topic gevonden die ongeveer hetzelfde wou als ik, maar er werd alleen een oplossing gegeven die gebruik maakt van javascript, en dat heb ik liever niet

Kan iemand me verder helpen?
Bvd!

zondag 13 juli 2008 22:02

Acties:

Juup

Dan moet je de :hover op zijn parent element zetten (werkt alleen niet in IE6)

Cascading Stylesheet:

#thumbs li:hover a {
    color:white;
    background-color:black;
}

[ Voor 37% gewijzigd door Juup op 13-07-2008 22:05 ]

Een wappie is iemand die gevallen is voor de (jarenlange) Russische desinformatiecampagnes.
Wantrouwen en confirmation bias doen de rest.

zondag 13 juli 2008 22:09

Acties:

Verwijderd

Topicstarter

Aha!
Helemaal niet aan gedacht,
heel erg bedankt

Maar bij display:block heb je ook dat de hele div klikbaar wordt,
hoe krijg ik dat hier ook(met css).

Dit is mogelijk met <div onclick='google.nl'> en cursor op pointer te zetten, maar is dit ook mogelijk met css?

[ Voor 67% gewijzigd door Verwijderd op 13-07-2008 22:10 ]

zondag 13 juli 2008 22:51

Acties:

Verwijderd

#thumbs:hover gebruiken

display:block zorgt er enkel voor dat je link als een block element wordt weergegeven ipv inline text (waardoor je het een achtergrondkleur kan geven). Je kan het niet gebruiken om de parent-div op magische wijze mee van kleur te laten veranderen.

maandag 14 juli 2008 02:13

Acties:

Cousin Boneless

Hoelang we IE6 nog moeten ondersteunen is een discussie apart.. Ik juich het toe als we nu massaal besluiten dat we het niet meer doen. Je eerste punt (hover op de links) is met CSS op te lossen voor de moderne browsers, het 2e punt niet (klikken op de div). En wat is dan je overweging om geen javascript te willen gebruiken? Het is puur visueel, dus als er mensen echt zo stom zijn om javascript uit te zetten functioneert de site nog, maar ziet er wat minder fraai uit.
De twee functionaliteiten die je verwacht zijn nogal conflicterend. Welke link moet er gevolgd worden als de links binnen je div naar iets anders verwijzen dan de link op de onclick? Bedoel je misschien dat de div de link is en de links daarbinnen eigenlijk fungeren als een soort span-tag? In dat geval heb je dus idd geen javascript nodig, want dan kun je je div-tag vervangen door een a-tag en een :hover pseudo class in je css opnemen, waarop je de weergave van de geneste spans aanpast..

Hier is overigens de code om het met javascript op te lossen. Het enige wat je hoeft te doen is de class van je div aanpassen op de mouseover en de mouseout. Dit werkt in IE7, FF, Safari en Opera (en ik verwacht in IE6 maar heb ik hier niet geinstalleerd):

HTML:

<html>
<head>
    <style>
        .hoverDiv
        {
            cursor: pointer;
        }
        
        .hoverDiv-normal a
        {
            background-color: white;
            color: black;
        }
    
        .hoverDiv-hovering a
        {
            background-color:black;
            color:white;
        }
    </style>
    
    <script type="text/javascript">
        function doMouseOver(sender)
        {
            sender.className = 'hoverDiv hoverDiv-hovering';
        }
        
        function doMouseOut(sender)
        {
            sender.className = 'hoverDiv hoverDiv-normal';
        }
        
        function doClick()
        {
            document.location = 'http://www.tweakers.net';
        }
    </script>
</head>

<body>
    <div class="hoverDiv hoverDiv-normal" onclick="doClick()" onmouseover="doMouseOver(this)" onmouseout="doMouseOut(this)">
    Consequat ut iriure vulputate, vero blandit, accumsan eu consequat quis accumsan. 
    Ullamcorper <a href="http://www.tweakers.net">tweakers.net</a> wisi eros amet, 
    minim augue, duis, hendrerit. 
    </div>
</body>
</html>

maandag 14 juli 2008 16:55

Acties:

Verwijderd

Topicstarter

Oke, bedankt iedereen.
Ik ga dus toch maar javascript gebruiken.

Alles werkt nu, bedankt!

Ik heb nu dit :

code:

#thumbs li {
cursor:pointer;
}
#thumbs li:hover {
    background-color: #5e6661;
    color:white;
}


<li OnClick="javascript:window.location='link'">

[ Voor 119% gewijzigd door Verwijderd op 14-07-2008 17:00 ]

maandag 14 juli 2008 16:59

Acties:

TeeDee

CQB 241

onmouseover?

Staat letterlijk in Cousin Boneless' reactie.

Blegh, wegge-edit

[ Voor 22% gewijzigd door TeeDee op 14-07-2008 16:59 ]

Heart..pumps blood.Has nothing to do with emotion! Bored

dinsdag 15 juli 2008 11:39

Acties:

Bosmonster

*zucht*

Verwijderd schreef op maandag 14 juli 2008 @ 16:55:
Oke, bedankt iedereen.
Ik ga dus toch maar javascript gebruiken.

Alles werkt nu, bedankt!

Ik heb nu dit :
code:
1
2
3
4
5
6
7
8
9
10
#thumbs li {
cursor:pointer;
}
#thumbs li:hover {
    background-color: #5e6661;
    color:white;
}


<li OnClick="javascript:window.location='link'">

Dit levert overigens wel een aantal issues op. Naast zoekmachine (on)vriendelijkheid, kan het ook problemen geven met links in de div. (Een klikbare link in een div met een onclick event, rara). Daarnaast is het wat onvriendelijk tegen de gebruiker, als die iets misklikt zit ie ineens ergens anders.

Overigens hoort "javascript:" niet thuis in een event.

Uit usability oogpunt zou ik overigens ook geen complete vlakken klikbaar maken, maar de klikacties tot de links laten.

[ Voor 10% gewijzigd door Bosmonster op 15-07-2008 12:12 ]

dinsdag 15 juli 2008 11:43

Acties:

curry684

left part of the evil twins

Bosmonster schreef op dinsdag 15 juli 2008 @ 11:39:
[...]

Naast zoekmachine (on)vriendelijkheid

Not to mention braillebrowsers, print views, voorleesbrowsers, tekstbrowsers zonder JS support....

Professionele website nodig?

dinsdag 15 juli 2008 11:51

Acties:

Erkens

Fotograaf

curry684 schreef op dinsdag 15 juli 2008 @ 11:43:
[...]

Not to mention braillebrowsers, print views, voorleesbrowsers, tekstbrowsers zonder JS support....

offtopic:
en je vergeet mensen die dmv het toetsenbord soms willen navigeren in de "normale" JS capable browsers

dinsdag 15 juli 2008 11:55

Acties:

curry684

left part of the evil twins

Die 3 puntjes aka ellipses betekenen 'vul de rest zelf maar in'

Professionele website nodig?