Bonjour!

Je voudrais savoir s'il est possible, en css, d'agir sur tout les éléments sauf celui survolé. Voici mon cas:

HTML:

<section id="zone-text">
    <div id="txt1">
        <h2>Une guerre sans pitié</h2>
	    <p>Capitaine d'un vaisseau de la Fédération, vous venez de subtiliser un document vital permettant de gagner la guerre que vous tendez à perdre contre les Rebelles qui font un carnage dans cette galaxie.<br/><br/>Cependant, les Rebelles vous traquent et la flotte de la Fédération n'est pas au secteur voisin. Vous déplacant de balises en balises, de secteurs en secteurs, vous devrez rester sur vos gardes, prêt à combattre quiconque s'interposant entre vous et le restant de la flotte de la Fédération.</p>
    </div>
    <div id="txt2">
	<h2>Des dilèmes à chaque instants</h2>
	    <p>Certaines personnes profitent de la situation désatreuse de l'endroit pour s'en prendre aux autres en utilisant aussi bien la ruse que l'armement. Ce qui semble être un marchand prêt à vous vendre des drones peut en réalité être un pirate préparant une embuscade mettant votre vaisseau et votre vie en péril. <br/><br/>Faire preuve de prudence est un atout, mais cela peut également se retourner contre vous. Peut-être auriez-vous râté une occasion de faire fortune en laissant un civil vous suppliant de le protéger d'un pirate mourir?</p>
    </div>
    <div id="txt3">
        <h2>Des combats stratégiques</h2>
	    <p>Les différents secteurs ne sont pas neutres, tous une appartenance. Chaque changements de secteur influent sur le résultat de votre mission. <br/><br/>Un secteur pirate semble être une mine d'or pour piller des pirates, mais votre vaisseau pourra-t-il encaisser tout les combats qui vous y attendent? Êtes-vous en train de vous mener à votre propre mort? En sautant d'une balise à une autre, vous êtes confrontés à un pirate au beau milieu d'un champ d'astéroïde, arriverez-vous à tourner ce milieu à votre avantage? Vous êtes le Capitaine, c'est à vous de prendre les décisions, l'avenir de cette galaxie dépend de votre personne.</p>
    </div>
</section>

CSS:

#zone-text{
    background-image:url("../images/background.png");
    width:100%;
    height:30em;
    margin-top:3em;
    display:flex;
    flex-direction: row;
}
#zone-text div{
    width:20%;
    margin:auto;
    background-image:linear-gradient(#afafaf,#8e8e8e);
    border:2px solid black;
    border-radius:5px;
    box-shadow: 3px 3px 3px 1px #191818;
    padding:1em;
    overflow:hidden;
    height:80%;
    margin-top:2em;
    opacity:1;
    transition:1s;
}
#txt1:hover{
    width:50%;
}
#txt2:hover{
    width:50%;
}
#txt3:hover{
    width:50%;
}

Je voudrais qu'au survol d'une div, les deux autres div subissent un effet css, par exemple que leur taille soit réduite. Est-ce possible de le faire uniquement en css? Si oui, je pourrais avoir de l'aide?

Merci d'avance!

PS: désolé pour l'indentation du code HTML (et les apparitions de balises <br/> '-'), le résultat entre le moment où je modifie et le moment ou je valide les modifications n'est pas le même, je ne sais pas trop pourquoi :x

-
Edité par Mysterious Person- 28 janvier 2018 à 14:49:24

Salut,

Dans ta configuration, c'est possible avec une petite astuce. https://jsfiddle.net/fepu3vjd/ 

Au passage, laisse tomber les ID, garde ça pour les ancres. Pour ton css, utilise des classes.

Merci beaucoup pour ton aide

Cependant, il reste un petit problème. Dans le code que tu as tapé, tout les div subissent une réduction de l'opacité et de la taille si je survole .conteneur =/

Sais-tu comment régler ce problème? Merci!

D'accord, ça, je sais le faire en utilisant js

Merci de ton aide!