web-dev-qa-db-ja.com

ある要素にカーソルを合わせて別の要素に影響を与える方法はありますか？

これと同じくらいシンプルにしたいのですが、そうではないことはわかっています。

img {
  opacity: 0.4;
  filter: alpha(opacity=40);
}

img:hover {
  #thisElement {
    opacity: 0.3;
    filter: alpha(opacity=30);
  }
  opacity:1;
  filter:alpha(opacity=100);
}

そのため、imgにカーソルを合わせると、＃thisElementの不透明度が30％に変更され、画像の不透明度が100％に変更されます。実際にCSSのみを使用してこれを行う方法はありますか？

これがHTMLです

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="C:\Users\Shikamaru\Documents\Contwined Coding\LearningToCode\Learning jQuery\js\jquery-1.6.2.min.js"></script> 
<script type="text/javascript" src="briefcase.js"></script>
<link rel="stylesheet" type="text/css" href="taskbar.css"/>
<link rel="stylesheet" type="text/css" href="briefcase.css" /> 
<title>Briefcase</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
</head> 

<body> 

<div class="mask"></div>
<div class="float">
  <div id="album1">Album Title</div>
  <img class="left" src="bradBeachHeart.JPG" alt="Brad at the Lake" />

  <img class="left" src="mariaNavi.jpg" alt="Making Maria Na'vi" />

  <img class="left" src="mattWaterRun.jpg" alt="Photoshopped Matt" />
</div>

<div class="gradientTop"></div>
<div class="gradientBottom"></div>


</body> 
</html>

そしてこれがCSSです：

body {
  font: normal small/3em helvetica, sans-serif;
  text-align: left;
  letter-spacing: 2px;
  font-size: 16px;
  margin: 0;
  padding: 0;
}

div.gradientTop {
  position: absolute;
  margin-top: 5px;
  z-index: 2;
  width: 206px;
  height: 30px;
  float: left;
  background: -webkit-linear-gradient(rgba(255, 255, 255, 2), rgba(255, 255, 255, 0))
}

div.gradientBottom {
  position: absolute;
  margin-bottom: 5px;
  z-index: 2;
  width: 206px;
  height: 120px;
  float: left;
  bottom: -210px;
  background: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1))
}

div.float {
  border-right: 1px solid orange;
  position: absolute;
  z-index: 2;
  margin-left: 5px;
  margin-top: 5px;
  float: left;
  width: 200px;
}

div.mask {
  position: relative;
  z-index: 1;
  margin-top: 5px;
  float: left;
  width: 206px;
  height: 805px;
  background-color: white;
}

img.left {
  z-index: inherit;
  margin-bottom: 3px;
  float: left;
  width: 200px;
  min-height: 200px;
  /* for modern browsers */
  height: auto !important;
  /* for modern browsers */
  height: 200px;
  /* for IE5.x and IE6 */
  opacity: 0.4;
  filter: alpha(opacity=40)
}

img.left:hover + #album1 {
  opacity: .4;
}

img.left:hover {
  opacity: 1.0;
}

#album1 {
  z-index: 2;
  width: 200px;
  color: white;
  text-align: center;
  position: absolute;
  background: orange;
  top: 70px;
}
cssimagehoveropacity
43
Marlon

CSSでこれを行う唯一の方法は、影響を受ける要素が子孫または隣接する兄弟の場合です。

子孫の場合：

#parent_element:hover #child_element, /* or */
#parent_element:hover > #child_element {
    opacity: 0.3;
}

次のような要素に適用されます：

<div id="parent_element">
    <div id="child_element">Content</div>
</div>

隣接する兄弟の場合：

#first_sibling:hover + #second_sibling {
    opacity: 0.3;
}

次のようなマークアップで機能します：

<div id="first_sibling">Some content in the first sibling</div> <div id="second_sibling">and now in the second</div>

どちらの場合も、セレクターの後者の要素が選択されます。

擬似コードの例を考えると、おそらく次のようなものが必要です。

img:hover + img {
    opacity: 0.3;
    color: red;
}

JS Fiddle demo 。

62
David Thomas

あなたはおそらくあなたが望むことをする純粋なCSSの方法を探していることを知っていますが、HTML + CSS + JSを素晴らしいMVC構造として使用することをお勧めします。

  • HTMLはデータを含むモデルです
  • CSSはビューであり、ページの外観を定義します
  • JSは、モデルとビューの相互作用を制御するコントローラーです。

ここで活用すべき制御の側面です。ユーザーインタラクションでアイテムのビューをcontrolしたい。それは正確に JSの目的です。

非常に最小限のJavaScriptを使用すると、imgにカーソルを合わせたときに、#thisElementのクラスのオンとオフを切り替えることができます。確かにCSSセレクターゲームをしのぐことはできませんが、純粋なCSSの回答のみを受け入れてもよいかどうかはわかります。

5
zzzzBov