Forum : modifier plusieurs elements au survol d'un de ceux ci

bonjour,
j'ai une page d'accueil avec 4 elements qui renvoient a la meme page et je voudrait qu'au survol de l'un des quatre, les quatres changent d'apparence (je voudrai changer l'opacite). est ce possible de le faire en css3 ou faut il forcement faire du javascript ?
voici mon code

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <link rel="stylesheet" href="tinoo.css" />
        <title>Gallerie Mathilde Rossignol</title>
    </head>

        <body>
            <div id="bloc_page">
                <header>
                    <div id="entete">
                        <div id="lang">
                            <nav>
                                <li><a href="">Français</a></li>
                                <li><a href="">English</a></li>
                            </nav>
                        </div>
                        <nav id="menu">
                        <li><a href="index.html">AccueiL</a></li>
                        <li><a href="galerie.html">GaLeries</a></li>
                        <li><a href="actualite.html">ActuaLité</a></li>
                        <li><a href="presentation.html">PréSentation</a></li>
                        </nav>
                        <div id="titre"><h1>Mat<span>hiLde Ros</span>SignoL</br><span>Artiste Peintre</span></h1></div>
                    </div>
                </header>
                <div id="menu_index">
                        <a href="presentation.html"><h2 id="lien_pres">PréSentation</h2></a>
                        <a href="presentation.html"><h4 id="pres1">DémarChePlastiQue</h4></a>
                        <a href="presentation.html"><h4 id="pres2">ParCours</h4></a>
                        <a href="galerie.html"><h2 id="lien_gal">GaLeries</h2></a>
                        <h4 id="gal1">2013</h4>
                        <h4 id="gal2">2012</h4>
                        <h4 id="gal3">2011</h4>
                        <h4 id="gal4">2007</h4>
                        <a href="actualite.html"><h2 id="lien_actu">ActuaLité</h2></a>
                        <h4 id="actu1">ExpOsitions</h4>
                        <h4 id="actu2">Contact</h4>
                </div>

                <footer>

                </footer>

            </div>
        </body>

    <script src="js/jquery.js"></script>
<html>

et le css

html
{
height:100%;
}
body
{
    height:100%;
    margin:0px;
    background-color: #775b59;
    font-family: Calibri,Trebuchet MS;
}
#bloc_page
{
    min-height:100%;
    /*background-image: url("images/fond.jpg");*/
    background-repeat:no-repeat;
    width : 900px;
    min-height:100%;
    margin-left:auto;
    margin-right:auto;
/*  position:relative;/*pour pouvoir mettre le titre en position absolue*/
}
/*header*/
#entete
{
display:table;
}
#lang,#titre,#menu
 {
 display: table-cell;
 vertical-align:middle;
 text-align:center;
}
#menu
{
vertical-align:center;
text-align:center;
width:800px;
}
#lang
{
padding-left:10px;
width:50px;
}

header nav li
{
list-style-type: none;
background:rgba(255,255,255,0.5);
margin:1px;
}
#menu nav li:hover
{
background:rgba(255,255,255,1);
}

#menu li
{
display:inline-block;
background:rgba(255,255,255,0.5);
padding:5px 15px 5px 15px;
font-size:1.2em;
}
#menu li:hover
{
background:rgba(255,255,255,1);
}
h1
{   
    right:0px;
    top:0px;
    font-size : 1.8em;
    text-align : center;
    width: 300px;
    background:rgba(255,255,255,0.5);
}
span
{
font-size : 0.8em;
}
h3
{
font-size:1.5em;
background:rgba(255,255,255,0.5);
text-align:center;
}
/*footer*/
footer nav
{
text-align:center;
}
footer nav li
{
display: inline-block;
list-style-type: none;
margin:4px;
}
/*page actualité*/
#titre_expo
{
position:relative;
left:100px;
width:200px;
}
#tableau
{
/*background-color : rgba(255,255,255,0.5);*/
padding:20px;
top:120px;
left:20px;
min-width:600px;
}
#titre_contact
{
margin-left:500px;
width:200px;
}
#text_contact
{
margin:40px;
text-align:right;
}
/*page galerie*/
.galerie_nav, .galerie_img
{
text-align:center;
}
img[id^=img]
{
border: 4px solid white;
}
/*page presentation*/
#titre_demarche
{
margin-left:75px;
width:300px;
}
#titre_parcours
{
margin-left:600px;
width:200px;
}
#texte_demarche, #texte_parcours
{
width:800px;
background-color:rgba(255,255,255,0.5);
}
#texte_demarche
{
margin-left:20px;
}
#texte_parcours
{
margin-left:90px;
}
/*page index*/
a
{
text-decoration:none;
color:black;
}
[id*="pres"]:hover
{
background-color:rgba(255,255,255,1);
}
[id*="gal"]:hover
{
background-color:rgba(255,255,255,1);
}
#menu_index
{
position:relative;
background-color:yellow;
}
h4
{
text-align:center;
position:absolute;
background:rgba(255,255,255,0.5);
}
#lien_pres, #lien_gal, #lien_actu
{
background:rgba(255,255,255,0.5);
width:200px;
text-align:center;
font-size:1.8em;
position:absolute;
}
#lien_pres
{
left:120px;
}
#pres1
{
left:20px;
top:60px;
width:180px;
}
#pres2
{
left:140px;
top:110px;
width:100px;
}
#lien_gal
{
right:80px;
top:120px;
}
#gal1
{
right:140px;
top:180px;
width:60px;
}
#gal2
{
right:60px;
top:210px;
width:60px;
}
#gal3
{
right:125px;
top:260px;
width:60px;
}
#gal4
{
right:90px;
top:320px;
width:60px;
}
#lien_actu
{
left:80px;
top:360px;
}
#actu1
{
left:30px;
top:430px;
width:120px;
}
#actu2
{
left:190px;
top:480px;
width:90px;
}

modifier plusieurs elements au survol d'un de ceux ci

3 réponses