CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

djsteiner Nybegynder

17. oktober 2015 - 11:27 Der er 6 kommentarer og
1 løsning

CSS hover over tekst og div på samme tid

Hej alle

Jeg vil gerne have lavet en løsning sådan at når man holder musen hen over enten teksten eller "boxen" så ændre farven på begge elementer på samme tid.

Jeg har sat noget op her:

http://djsteiner.dk/

Håber det giver mening :)

Synes godt om

Hoxfoximper Nybegynder

17. oktober 2015 - 12:23 #1

#lol:hover{
background: #000;
}

#lol > span{
color: #fff;
}

Synes godt om

Hoxfoximper Nybegynder

17. oktober 2015 - 12:24 #2

#lol:hover{
background: #000;
}

#lol > span:hover{
color: #fff;
}

Synes godt om

Hoxfoximper Nybegynder

17. oktober 2015 - 12:26 #3

Ellers hvis mig html strukturen så får du en optimal løsning:D

Synes godt om

djsteiner Nybegynder

17. oktober 2015 - 13:17 #4

Hej Hoxfox :)

her har du min kode:

<style>
div.item {
/* To correctly align image, regardless of content height: */
vertical-align: top;
display: inline-block;
/* To horizontally center images and caption */
text-align: center;
/* The width of the container also implies margin around the images. */
width: 120px;
}
.box {
width: 100px;
height: 100px;
background-color: grey;
}

.box:hover{ background-color:#F51619;
}

.caption {
/* Make the caption a block so it occupies its own line. */
display: block; }

/* unvisited link */
a:link {
color: #000;
text-decoration: none;
}

/* visited link */
a:visited {
color: #000;
text-decoration: none;
}

/* mouse over link */
a:hover {
color: #F51619;
}

/* selected link */
a:active {
color: #F51619;
border-bottom:solid 1px #F51619;
}

</style>

<body>
<div class="item">
<div class="box"></div>
<a href="#"><span class="caption">Vare</span></a>
</div>
<div class="item">
<div class="box"></div>
<a href="#"><span class="caption">Retur</span></a>
</div>
<div class="item">
<div class="box"></div>
<a href="#"><span class="caption">Retur</span></a>
</div>

Synes godt om

djsteiner Nybegynder

17. oktober 2015 - 13:20 #5

Det jeg gerne vil opnå er noget i stil med dette:

http://www.stylepit.dk/CustomerService

Synes godt om

Hoxfoximper Nybegynder

17. oktober 2015 - 17:32 #6

div.item:hover div{
background-color:#F51619;
}

div.item:hover a span{
color: #F51619;
}

fjern det der er nedenfor denne tekst

/* mouse over link */
a:hover {
color: #F51619;
}

.box:hover{ background-color:#F51619;
}

Synes godt om

djsteiner Nybegynder

18. oktober 2015 - 03:44 #7

Fantastisk Hox!:) mange tak for hjælpen :)

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Programmeringssprog kurser

Kurser inden for grundlæggende programmering

Se alle Programmeringssprog kurser

Flere spørgsmål fra Andet programmering kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Kodning af element i custom css Af Jacob Hedelund i Andet programmering	3	14/10/202410:35	14/10/202419:46
Delphi 11 - converter webp til jpg fil Af juzas i Andet programmering	5	12/10/202413:28	14/10/202403:54
Trim tekst i batch script Af Dan Elgaard i Andet programmering	5	05/09/202411:08	10/09/202415:29
ASP Classic fil fra subfolder Af bsn i Andet programmering	3	07/05/202416:14	08/05/202401:00
Session Variable Af bsn i Andet programmering	3	01/05/202409:44	02/05/202409:29

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS