Avatar billede esbenn Nybegynder
24. oktober 2010 - 17:15 Der er 6 kommentarer og
1 løsning

Mouseover billede skifter overskriftens farve

Hej.

Mit problem var lige lidt svært at forklare mig overskriften, men here goes:

Jeg laver nogle udtræk fra en database hvor jeg for en overskrift, et billede og en lille tekst. Som det er lige nu, så er både billede og overskrift links, men kun teksten skifter farve ved mouseover...
Men vil høre om det kan lade sig gøre at når man laver mouseover på billedet, så skifter overskriften stadig farve?
Ved ikke helt om jeg skulle have oprettet i javascript istedet, men nu prøver jeg her i PHP i starten...

På forhånd tak :)
Avatar billede naas Nybegynder
24. oktober 2010 - 17:35 #1
kan du ikke lave et id/class der hedder det samme til både billedet og overskriften, og derefter lave en css fil, som får overskriften til at skifte farve? :)
Avatar billede majbom Novice
24. oktober 2010 - 19:04 #2
uanset hvad, er det ikke php, du skal over i javascript og css...
Avatar billede wanze Nybegynder
24. oktober 2010 - 20:24 #3
Hvis jeg forstår dig rigtigt, så burde det her være en løsning:

<!doctype html>
<html>
<head>
<style type="text/css">
    .article:hover h1,
    .article:hover p
    {
        color: red;
    }
    .article:hover img
    {
        border: 1px solid red;
    }
</style>
</head>
<body>
    <div class="article">
        <h1>Hello</h1>
        <img src="billede.jpg" />
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</html>
Avatar billede esbenn Nybegynder
27. oktober 2010 - 21:29 #4
Hvad hvis min opbygning er på denne måde:

.main .case_wrapper .case_posts {
    position:relative;
    float:left;
    width:280px;
    border-bottom:1px solid #B3B3B3;
    text-align:left;
    min-height:300px;
    margin-top:40px;
    margin-right:20px;
}

.main .case_wrapper .case_posts .case_title {
    font-size:24px;
    font-weight:bold;
}

.main .case_wrapper .case_posts .case_tag {
    font-size:12px;
    color:#76AD1C;
}

.main .case_wrapper .case_posts .case_ref {
    font-size:12px;
    line-height:22px;
    margin-top:15px;
    margin-bottom:10px;
}


echo "<div class='case_posts'><div class='case_title'><a href='?page_id=7&case=".$case_row['object_id']."' class='headerlink'>".$case_post_row['post_title']."</a></div><span class='case_tag'>".$tags."</span><br><a href='?page_id=7&case=".$case_row['object_id']."' class='headerlink'><img src='".$pic_link."' border='0px'></a><div class='case_ref'>".$case_post_row['post_excerpt']."</div></div>";


Hvordan vil du så bygge dit forslag ind i? :)
Avatar billede esbenn Nybegynder
27. oktober 2010 - 21:32 #5
og

a.headerlink:link {
    text-decoration:none;
    color:#646567;
}
a.headerlink:active {
    text-decoration:none;
    color:#646567;
}
a.headerlink:visited {
    text-decoration:none;
    color:#646567;
}
a.headerlink:hover {
    text-decoration:none;
    color:#76AD1C;
}
Avatar billede majbom Novice
27. oktober 2010 - 22:18 #6
du skal stadig over i css-kategorien...
Avatar billede esbenn Nybegynder
27. oktober 2010 - 23:38 #7
Jamen så lukker jeg da bare her... Tak for hjælpen...
Avatar billede 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.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

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