Comment faire pour affecter d'autres éléments lorsqu'un div est planait
Je pense que c'est une question très simple mais je ne suis pas sûr de savoir comment cela peut être fait.
Ce que je veux faire, c'est quand un certain div
est planait, il faudrait affecter les propriétés de l'autre div
.
Par exemple, dans cet exemple simple, lorsque vous survolez #cube
ça change de la background-color
mais ce que je veux, c'est que quand j'ai passez la souris sur #container
, #cube
est affecté.
CSS:
div {
outline: 1px solid red;
}
#container {
width: 200px;
height: 30px;
}
#cube {
width: 30px;
height: 100%;
background-color: red;
}
#cube:hover {
width: 30px;
height: 100%;
background-color: blue;
}
HTML:
<div id="container">
<div id="cube">
</div>
</div>
Vous devez vous connecter pour publier un commentaire.
Si le cube est directement à l'intérieur du conteneur:
Si le cube est à côté (après conteneurs balise de fermeture) du conteneur:
Si le cube est quelque part à l'intérieur du conteneur:
Si le cube est un frère ou une sœur du conteneur:
~
pour " cube est quelque part une fois que le conteneur dans les DOM et les actions d'un parent#container
est à côté de#cube
, c'est à dire#container
suit#cube
?td
pour changer la couleur d'arrière-plan d'une autretd
sur la même ligne?#container:hover ~ #cube, #container:hover ~ #rectangle { background-color: yellow; }
Dans cet exemple particulier, vous pouvez utiliser:
Cela ne fonctionne que depuis
cube
est un enfant decontainer
. Pour les scénarios plus complexes, vous aurez besoin d'utiliser le javascript.En utilisant le sélecteur de frères est la solution générale pour le style d'autres éléments lors du survol d'un donné un, mais il fonctionne seulement si les autres éléments de suivre celle donnée dans les DOM. Que pouvons-nous faire lorsque les autres éléments doivent être effectivement avant le planait un? Disons que nous voulons mettre en œuvre une barre de signal widget d'évaluation comme celle ci-dessous:
Cela peut être fait facilement en utilisant le CSS flexbox modèle, par la mise en
flex-direction
àreverse
, de sorte que les éléments sont affichés dans l'ordre inverse de celui qu'ils soient dans les DOM. La capture d'écran ci-dessus est à partir de ces un widget, mis en œuvre avec pur CSS.Flexbox est très bien pris en charge par 95% des navigateurs modernes.
CSS:
HTML:
.rating div
, supprimer la marge, et ajouterborder-right: 4px solid white;
Grand merci à Mike et Robertc pour leurs messages utiles!
Si vous avez deux éléments dans votre code HTML et vous souhaitez
:hover
sur une cible et un changement de style dans l'autre les deux éléments doivent être directement liées-parents, enfants ou frères et sœurs. Cela signifie que les deux éléments doivent être l'un dans l'autre ou les deux doivent être contenus dans le même élément plus large.Je voulais afficher les définitions dans une boîte sur le côté droit du navigateur que mes utilisateurs de lire à travers mon site et
:hover
plus mis en évidence de conditions; par conséquent, je n'ai pas envie de la "définition" d'un élément affiché à l'intérieur du texte de l'élément.J'ai presque abandonné et ont juste ajouté javascript sur ma page, mais c'est l'avenir dang il! Nous ne devrions pas avoir à mettre en place avec le dos de sass en CSS et HTML de nous dire où nous devons placer nos éléments d'obtenir les effets que nous voulons! À la fin, nous compromise.
Bien que les éléments HTML dans le fichier doit être imbriquées ou contenue dans un seul élément pour être valide
:hover
cibles les unes des autres, cssposition
attribut peut être utilisé pour afficher n'importe quel élément à l'endroit où vous voulez. J'ai utilisé la position:fixe pour placer la cible de mon:hover
action où je le voulais sur l'écran de l'utilisateur quel que soit son emplacement dans le document HTML.Le code html:
Le css:
Dans cet exemple, la cible d'un
:hover
commande à partir d'un élément à l'intérieur de#explainBox
doit être#explainBox
ou de aussi au sein de#explainBox
. La position des attributs assignés à #définitions de la force qu'il apparaît à l'emplacement souhaité (en dehors de#explainBox
) même si elle est techniquement situé dans la mauvaise position dans le document HTML.Je comprends bien, il est considéré comme une mauvaise forme à utiliser le même
#id
pour plus d'un élément HTML; toutefois, dans ce cas, les instances de#light
peut être décrit de façon indépendante en raison de leurs positions respectives dans l'unique#id
'd éléments. Est-il une raison de ne pas répéter laid
#light
dans ce cas?ID
plusieurs fois. Il suffit d'utiliser unclass
.Seulement cela a fonctionné pour moi:
Où
.cube
est CssClass de la#cube
.Testé dans Firefox, Chrome et Bord.
Voici une autre idée qui vous permettent d'affecter d'autres éléments sans tenir compte de toute spécifique sélecteur et en utilisant uniquement le
:hover
de l'état de l'élément principal.Pour cela, je vais compter sur l'utilisation de la coutume des propriétés CSS (variables). Comme nous pouvons le lire dans le spécification:
L'idée est de définir des propriétés personnalisées à l'intérieur de l'élément principal et les utiliser pour le style des éléments d'enfant et puisque ces propriétés sont héritées nous avons simplement besoin de les changer à l'intérieur de l'élément principal sur le vol stationnaire.
Voici un exemple:
CSS:
HTML:
Pourquoi cela peut être mieux que personne en utilisant le sélecteur combiné avec hover?
Je peux fournir au moins 2 raisons qui font de cette méthode une bonne à prendre en compte:
border
,linear-gradient
,background-color
,box-shadow
etc. Cela permettra d'éviter de nous mettre à zéro toutes ces propriétés sur le vol stationnaire.Voici un exemple plus complexe:
CSS:
HTML:
Comme nous pouvons le voir ci-dessus, nous avons seulement besoin de un CSS déclaration afin de modifier les propriétés des différents éléments.