67

以下のHTMLでは、要素にカーソルを合わせると、CSSのみを使用し<a>て要素の色を変更したいと思います。<h1>これを達成する方法はありますか？

<h1>Heading</h1>
<a class="button" href="#"></a>

IDを含むdivをラップするとどうなりますか？

<div id="banner">
    <h1>Heading</h1>
    <a class="button" href="#"></a>
</div>

これは役に立ちますか？

4

10 に答える 10

119

要素がホバーされたときに要素の変更に続く兄弟を作成できます。たとえば、ホバーされaたときにリンクの色を変更できますが、前の兄弟に同じようにh1影響を与えることはできません。

h1 {
    color: #4fa04f;
}
h1 + a {
    color: #a04f4f;
}
h1:hover + a {
    color: #4f4fd0;
}
a:hover + h1 {
    background-color: #444;
}
<h1>Heading</h1>
<a class="button" href="#">The &quot;Button&quot;</a>
<h1>Another Heading</h1>

H1の色を緑がかった色に設定し、H1の兄弟であるAの色を赤みがかった色に設定します（最初の2つのルール）。3番目のルールは、私が説明したことを実行します。H1をホバーすると、Aの色が変わります。

ただし、4番目のルールは、アンカーに続くa:hover h1H1の背景色のみを変更し、アンカーに先行するH1の背景色は変更しないことに注意してください。

これはDOMの順序に基づいており、要素の表示順序を変更できるため、前の要素を変更できなくても、その要素を他の要素の後に表示して、目的の効果を得ることができます。スクリーンリーダーは通常、視覚的な順序と同じではない可能性があるDOMの順序
で アイテムをトラバースするため、これを行うとアクセシビリティに影響を与える可能性があることに注意してください。

于 2012-09-25T00:48:29.010 に答える
21

これを実行できるCSSセレクターはありません（CSS3でも）。a:parent h1CSSの要素は親を認識しないため、（たとえば）実行できません。また、彼らは兄弟（ほとんどの場合）を認識していないので、あなたはそうすることができません#container a:hover { /* do something with sibling h1 */ }。基本的に、CSSプロパティは、要素とその子以外は変更できません（親または兄弟にアクセスできません）。

h1 内に含めることができますがa、これによりh1ホバリングも可能になります。

これは、JavaScript（ jsFiddleの概念実証）を使用してのみ実現できます。これは次のようになります。

$("a.button").hover(function() {
    $(this).siblings("h1").addClass("your_color_class");
}, function() {
    $(this).siblings("h1").removeClass("your_color_class");
});
于 2012-09-25T00:24:54.273 に答える
10 

#banner:hover h1 {
  color: red;
}

#banner h1:hover {
  color: black;
}

a {
  position: absolute;
}
<div id="banner">
  <h1>Heading</h1>
  <a class="button" href="#">link</a>
</div>

フィドル： http： //jsfiddle.net/joplomacedo/77mqZ/

a要素は絶対に配置されます。あなたの既存の構造には完璧ではないかもしれません。私に知らせてください、私は回避策を見つけるかもしれません。

于 2012-09-25T00:52:38.597 に答える
4

http://plnkr.co/edit/j5kGIav1E1VMf87t9zjK?p=preview

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
    <style>
      ul:hover > li
      {
        opacity: 0.5;
      }
      ul:hover li:hover 
      {
        opacity: 1;
      }
    </style>
  </head>

  <body>
    <h1>Hello Plunker!</h1>
    <ul>
      <li>Hello</li>
      <li>Hello</li>
      <li>Hello</li>
      <li>Hello</li>
      <li>Hello</li>
    </ul>
  </body>

</html>

これは純粋なCSSでどのように行うことができるかの例です、それが誰かを助けることを願っています

于 2016-01-21T06:24:40.080 に答える
3

ほんの数行のCSSといくつかの基本的なFlexboxの理解で、これを達成することは確かに可能です。

スティーブンPが彼の答えで言ったように、隣接する兄弟コンビネータは兄弟の直後を選択します。OPが求めたことを達成するために、2つのフレックスアプローチを使用できます。

アプローチ1（「フレックスフロー」省略形プロパティを使用） 

.flex-parent {
  display: flex;
  flex-flow: column-reverse wrap
}

.flex-child-1:hover + .flex-child-2 {
  color: #FF3333;
}
<div class="flex-parent">
    <a class="flex-child-1">Hover me</a>  
    <h1 class="flex-child-2">I am changing color</h1>
</div>

アプローチ2（「order」プロパティと複数の子を使用）

.flex-parent {
  display: flex;
  flex-direction: column;
}

.flex-child-1 {
  order: 2;
}

.flex-child-2 {
  order: 1;
}

.flex-child-3 {
  order: 3;
}

.flex-child-1:hover+.flex-child-2 {
  color: #FF3333;
}
<div class="flex-parent">
  <h1 class="flex-child-3">I am not changing color</h1>
  <a class="flex-child-1">Hover me</a>
  <h1 class="flex-child-2">I am changing color</h1>
</div>

ボーナス：

CodePenボーナス

于 2020-11-23T02:37:24.847 に答える
1

H1タグをリンクに変更し、通常のテキストと同じスタイルにしますか？そして、これを使用して、

a:link {color:#FF0000;}      
a:hover {color:#FF00FF;}

また、ホバーすると機能するはずです:) divに含めて、次のようにターゲティングすることで、具体的にすることもできます。

.exampledivname a:link {color:#FF0000;}      
.exampledivname a:hover {color:#FF00FF;}

これは役立つはずです。

于 2012-09-25T00:22:32.577 に答える
0

誰かがこれを手伝ってくれたので、ここでも共有したいと思いました。

最初の例では、純粋なCSSでは実際に不可能です。ただし、親コンテナでラップすると、ホバリングしている子でたくさんのことを実行できます。

#banner:hover>h1{
  color:red;
}
h1:hover{
  color:black !important;
}
#banner{
  display:inline-block;
}
.button{
  display:inline-block;
  font-size:24px;
  width:100%;
  border:1px solid black;
  text-align:center;
}
h1{
  padding:0;
  margin:0;
}
<div id="banner">
    <h1>Heading</h1>
    <a class="button" href="#">Button!</a>
</div>

親は、現在ホバーされていない子を制御するだけです。次に、個々の要素とクラスにホバー状態を設定して、JSなしで兄弟を選択できるようにします。

これが実際のより高度な例です

https://codepen.io/levyA/pen/gOrdaLJ

于 2020-09-16T22:15:40.887 に答える
0

兄弟要素のセットスタイルの場合、最初にh1をホバーしたときに〜文字を使用してタグの色を設定し、2番目の場合にaをホバーしたときにh1セクションの背景色を変更します

h1:hover ~ a {
    color: #e34423;
}
a:hover ~ h1 {
    background-color: #eee;
}
于 2020-09-27T11:36:10.877 に答える
0

これはうまくいくかもしれません。私は最近、このアイデアを使用して、アニメーションの兄弟要素を停止しました。

h1 { color: inherit; }

#banner:hover { color: your choice; }
于 2020-10-23T19:09:51.377 に答える
0

この1行の純粋なCSSソリューションを試してください。

.parent:hover .child:not(:hover) {
  /* this style affects all the children *except* the one you're hovering over */
  color: red;
}

詳細はこちら：https ：//codyhouse.co/nuggets/styling-siblings-on-hover

于 2021-10-16T08:23:58.767 に答える