en CSS, nous pouvons modifier le style d'un élément enfant en cliquant sur l'élément parent, par exemple avec "A" "A" "PRE> XXX PRE>
ou P>
<a class='button1' href='#'>Example <i class='icon1'></i></a> <a class='button2' href='#'>Example <i class='icon2'></i></a>
4 Réponses :
Je pense que vous recherchez une combinaison de frères et sœurs. Voir: https://developer.mozilla.org/en-us/ Docs / Web / CSS / Généralités_Sibling_comminateur
Je ne pense pas que cela soit universellement soutenu par tous les navigateurs, faites donc attention lorsque vous utilisez des choses comme celle-ci dans un environnement de production.
Autres types de combinaisons: https://www.w3schools.com/css/css_combinators. ASP
Il n'existe pas de méthode supportée universellement en CSS de produire un comportement de clic ou de survol dans un élément qui n'est pas un nœud enfant de l'élément cliqué / planifié, malheureusement. Comme une autre réponse a souligné, il y a des combinaisons, mais ils ne fonctionnent pas comme vous le souhaitez pour des sélecteurs «actifs».
Je recommanderais d'aller à bon vieux JavaScript pour cela. P>
document.querySelector('.button1').addEventListener('click', function() {
document.querySelector('.button2').style.color = red;
});
Avez-vous envisagé la "Base de cocher Hack"? L'article Stuff que vous pouvez faire avec la case à cocher Hack contient des exemples de cette technique à l'aide de la case à cocher , boutons radio, zones d'onglets, menus déroulants, basculer et effondrer des panneaux. Les liens au bas de cet article contiennent plus d'exemples.
L'article CSS Cliquez sur Events Peut-être que vous recherchez.
L'article 101 façons de (AB) Utilisez une case à cocher mérite d'être examinée .
La "Cochez la case pirate" est un article vraiment cool et a des éléments nouveaux de là. Cependant, il fait mention dans le fond qu'il traverse la ligne en une mauvaise sémantique et que les JS devraient généralement être utilisés pour contrôler le comportement. Selon votre code de code, cela pourrait ne pas être souhaitable. Toujours une lecture valable, à coup sûr
Avec l'avènement de Eléments personnalisés autonomes (HTML) , il semble que cette "ligne" floue: ( html.spec.whatwg.org/multipage/... )
Dans CSS, vous pouvez sélectionner le frère suivant (dans ce cas, cliquer sur a.button1 code> pour effectuer a.button2 code>) à l'aide de sélecteur de sodiblon adjacent CSS ( +): document.querySelector('.button2').addEventListener('focusin', function() {
this.previousSibling.firstChild.style.display = 'none';
});
Dupliqué possible de Puis-je avoir un effet OnClick dans CSS?
Non, je ne parle pas d'effet oncelick