当前位置： 文江博客话题详情

有没有办法将鼠标悬停在一个元素上并影响另一个元素？

发布于 2024-11-26 18:55:11 字数 2847 浏览 1 评论 0原文

我希望它像这样简单，但我知道事实并非如此：

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;
}
原文

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;
}

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

百思不得你姐 2024-12-03 18:55:11

使用 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。

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.

回复 原文
不醒的梦 2024-12-03 18:55:11

我知道您可能正在寻找一种纯 CSS 方式来完成您想要的操作，但我建议您使用 HTML+CSS+JS 作为美妙的 MVC 结构。

  • HTML 是您的模型，包含您的数据
  • CSS 是您的视图，定义页面的外观
  • JS 是您的控制器，控制模型和视图的交互方式。

这里应该利用控制方面的优势。您想要控制用户交互中项目的视图。这正是 JS 的用途。

使用非常少的 JavaScript，当 img 悬停在上面时，您可以打开和关闭 #thisElement 的类。它肯定胜过玩 CSS 选择器游戏，尽管如果您只愿意接受纯 CSS 答案，我会理解。

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.

回复 原文
~没有更多了~

关于作者

阿楠

暂无简介

0 文章
0 评论
23 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

已经忘了多久

文章 0 评论 0

15867725375

文章 0 评论 0

LonelySnow

文章 0 评论 0

走过海棠暮

文章 0 评论 0

轻许诺言

文章 0 评论 0

信馬由缰

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文