有没有办法将鼠标悬停在一个元素上并影响另一个元素? [英] Is there any way to hover over one element and affect a different element?

查看：27
本文介绍了有没有办法将鼠标悬停在一个元素上并影响另一个元素?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我希望它像这样简单，但我知道它不是:

img {不透明度:0.4；过滤器:阿尔法(不透明度= 40)；}图像:悬停{#thisElement {不透明度:0.3；过滤器:阿尔法(不透明度= 30)；}不透明度:1；过滤器:阿尔法(不透明度= 100)；}

因此，当您将鼠标悬停在 img 上时，它会将 #thisElement 的不透明度更改为 30%，并将图像的不透明度更改为 100%.有没有办法只使用 css 来做到这一点?

这就是 HTML

<头><script type="text/javascript" src="C:UsersShikamaruDocumentsContwined CodingLearningToCodeLearning jQueryjsjquery-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>公文包</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/><身体><div class="mask"></div><div class="float"><div id="album1">专辑名称</div><img class="left" src="bradBeachHeart.JPG" alt="湖边的布拉德"/><img class="left" src="mariaNavi.jpg" alt="制作 Maria Na'vi"/><img class="left" src="mattWaterRun.jpg" alt="Photoshopped Matt"/>

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

这是CSS:

body {字体:普通小/3em Helvetica，无衬线；文本对齐:左；字母间距:2px；字体大小:16px；边距:0；填充:0；}div.gradientTop {位置:绝对；边距顶部:5px；z-索引:2；宽度:206px；高度:30px；向左飘浮;背景:-webkit-linear-gradient(rgba(255, 255, 255, 2), rgba(255, 255, 255, 0))}div.gradientBottom {位置:绝对；底边距:5px；z-索引:2；宽度:206px；高度:120px；向左飘浮;底部:-210px；背景:-webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1))}div.float {右边框:1px 纯橙色；位置:绝对；z-索引:2；左边距:5px；边距顶部:5px；向左飘浮;宽度:200px；}div.mask {位置:相对；z-索引:1；边距顶部:5px；向左飘浮;宽度:206px；高度:805px；背景颜色:白色；}img.left {z-index:继承；底边距:3px；向左飘浮;宽度:200px；最小高度:200px；/* 现代浏览器 */高度:自动！重要；/* 现代浏览器 */高度:200px；/* IE5.x 和 IE6 */不透明度:0.4；过滤器:alpha(不透明度=40)}img.left:hover + #album1 {不透明度:.4；}img.left:悬停{不透明度:1.0；}#专辑1{z-索引:2；宽度:200px；白颜色;文本对齐:居中；位置:绝对；背景:橙色；顶部:70px；}

解决方案

使用 CSS 做到这一点的唯一方法是，如果要影响的元素是后代元素或相邻同级元素.

如果是后代:

#parent_element:hover #child_element,/* 或 */#parent_element:悬停>#child_element {不透明度:0.3；}

这将适用于以下元素:

<div id="child_element">内容</div>

对于相邻的兄弟姐妹:

#first_sibling:hover + #second_sibling {不透明度:0.3；}

适用于标记，例如:

第一个兄弟中的一些内容
<div id="second_sibling">现在在第二个</div>

在这两种情况下，选择器中的后一个元素是被选中的元素.

给定你的伪代码示例，你可能想要这样的东西:

img:hover + img {不透明度:0.3；红色;}

JS Fiddle 演示.

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:UsersShikamaruDocumentsContwined CodingLearningToCodeLearning jQueryjsjquery-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;
}

解决方案

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.

这篇关于有没有办法将鼠标悬停在一个元素上并影响另一个元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆