可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

This question already has an answer here:

How to affect other elements when a div is hovered 6 answers

I want it to be as simple as this, but I know it isn\'t:

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

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

So when you hover over img, it changes the opacity of #thisElement to 30% and changes the opacity of the image to 100%. Is there a way to actually do this using only css?

So this is the 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>

And this is the 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;
}

回答1:

The only way to do this with CSS is if the element to affect is either a descendent or an adjacent sibling.

In the case of a descendent:

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

Which will apply to elements such as:

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

For adjacent siblings:

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

Which works for mark-up such as:

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

In both cases the latter element in the selector is the one chosen.

Given your pseudo-code example, you probably want something like:

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

JS Fiddle demo.

回答2:

I know you\'re probably looking for a pure-css way of doing what you want, but I\'d suggest you use HTML+CSS+JS as the wonderful MVC structure that they are.

HTML is your Model, containing your data
CSS is your View, defining how the page should look
JS is your Controller, controlling how the model and view interact.

It\'s the controlling aspect that should be taken advantage of here. You want to control a view of an item on a user interaction. That\'s exactly what JS is meant for.

With very minimal JavaScript, you could toggle a class on and off of #thisElement when the img is hovered over. It certainly beats playing CSS selector games, although I\'d understand if you\'re only willing to accept a pure-css answer.

Is there any way to hover over one element and aff

问题:

回答1:

回答2:

收藏的人(0)

Is there any way to hover over one element and aff

问题:

回答1:

回答2:

收藏的人(0)

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮