CSS：悬停一个元素，多个元素的效果？

发布于 2024-08-05 16:37:44 字数 303 浏览 4 评论 0原文

我正在寻找解决悬停问题的方法。

<div class="section">
  <div class="image"><img src="myImage.jpg" /></div>
  <div class="layer">Lorem Ipsum</div>
</div>

现在，图像和图层这两个类都有边框。正常和悬停时两者都有不同的颜色。有没有办法做到这一点，所以如果我将鼠标悬停图层类，则图层和图像类悬停边框颜色都处于活动状态？反之亦然？

原文

I'm looking for a method for my hovering issue.

<div class="section">
  <div class="image"><img src="myImage.jpg" /></div>
  <div class="layer">Lorem Ipsum</div>
</div>

Now, both classes, image and layer, have borders. Both have different color for normal and hover.
Is there way to make it, so if I hover layer class, both layer and image class hovering border color is active? And vise versa?

分享到QQ

分享到微博

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

发布评论

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

带上头具痛哭 2024-08-12 16:37:44

为此，您不需要 JavaScript。

一些 CSS 就可以做到。这是一个例子：

<html>
  <style type="text/css">
    .section { background:#ccc; }
    .layer { background:#ddd; }
    .section:hover img { border:2px solid #333; }
    .section:hover .layer { border:2px solid #F90; }
  </style>
</head>
<body>
  <div class="section">
    <img src="myImage.jpg" />
    <div class="layer">Lorem Ipsum</div>
  </div>
</body>
</html>

You don't need JavaScript for this.

Some CSS would do it. Here is an example:

<html>
  <style type="text/css">
    .section { background:#ccc; }
    .layer { background:#ddd; }
    .section:hover img { border:2px solid #333; }
    .section:hover .layer { border:2px solid #F90; }
  </style>
</head>
<body>
  <div class="section">
    <img src="myImage.jpg" />
    <div class="layer">Lorem Ipsum</div>
  </div>
</body>
</html>

回复收藏 0 原文

浅唱ヾ落雨殇 2024-08-12 16:37:44

这在 Firefox、Chrome 和 IE8 中对我有用……

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
    <head>
        <style type="text/css">
        div.section:hover div.image, div.section:hover div.layer {
            border: solid 1px red;
        }
        </style>
    </head>
    <body>
        <div class="section">
            <div class="image"><img src="myImage.jpg" /></div>
            <div class="layer">Lorem Ipsum</div>
        </div>
    </body>
</html>

你可能也想用 IE6 来测试它（我不确定它是否能在那里工作）。

This worked for me in Firefox and Chrome and IE8...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
    <head>
        <style type="text/css">
        div.section:hover div.image, div.section:hover div.layer {
            border: solid 1px red;
        }
        </style>
    </head>
    <body>
        <div class="section">
            <div class="image"><img src="myImage.jpg" /></div>
            <div class="layer">Lorem Ipsum</div>
        </div>
    </body>
</html>

... you may want to test this with IE6 as well (I'm not sure if it'll work there).

回复收藏 0 原文

月亮邮递员 2024-08-12 16:37:44

我认为对你来说最好的选择是将两个 div 用另一个 div 括起来。然后你可以通过CSS按照以下方式制作它：

<html>
<head>
<style>
  div.both:hover .image { border: 1px solid blue }
  div.both:hover .layer { border: 1px solid blue }
</style>
</head>

<body>
<div class="section">

<div class="both">
  <div class="image"><img src="myImage.jpg" /></div>
  <div class="layer">Lorem Ipsum</div>
</div>

</div>
</body>
</html>

I think the best option for you is to enclose both divs by another div. Then you can make it by CSS in the following way:

<html>
<head>
<style>
  div.both:hover .image { border: 1px solid blue }
  div.both:hover .layer { border: 1px solid blue }
</style>
</head>

<body>
<div class="section">

<div class="both">
  <div class="image"><img src="myImage.jpg" /></div>
  <div class="layer">Lorem Ipsum</div>
</div>

</div>
</body>
</html>

回复收藏 0 原文

素年丶 2024-08-12 16:37:44

这并不难实现，但是需要使用 javascript onmouseover 函数。伪脚本：

<div class="section ">

<div class="image"><img src="myImage.jpg" onmouseover=".layer {border: 1px solid black;} .image {border: 1px solid black;}" /></div>

<div class="layer">Lorem Ipsum</div>

</div>

使用您自己的颜色。您还可以在 mouseover 命令中引用 javascript 函数。

This is not difficult to achieve, but you need to use the javascript onmouseover function. Pseudoscript:

<div class="section ">

<div class="image"><img src="myImage.jpg" onmouseover=".layer {border: 1px solid black;} .image {border: 1px solid black;}" /></div>

<div class="layer">Lorem Ipsum</div>

</div>

Use your own colors. You can also reference javascript functions in the mouseover command.

回复收藏 0 原文

っ左 2024-08-12 16:37:44

我认为您需要使用 JavaScript 来完成此任务。

jQuery：

$(function(){
   $("#innerContainer").hover(
        function(){
            $("#innerContainer").css('border-color','#FFF');
            $("#outerContainer").css('border-color','#FFF');
        },
        function(){
            $("#innerContainer").css('border-color','#000');
            $("#outerContainer").css('border-color','#000');
        }
    );
});

相应地调整值和元素 id :)

You'd need to use JavaScript to accomplish this, I think.

jQuery:

$(function(){
   $("#innerContainer").hover(
        function(){
            $("#innerContainer").css('border-color','#FFF');
            $("#outerContainer").css('border-color','#FFF');
        },
        function(){
            $("#innerContainer").css('border-color','#000');
            $("#outerContainer").css('border-color','#000');
        }
    );
});

Adjust the values and element id's accordingly :)

回复收藏 0 原文

梦中的蝴蝶 2024-08-12 16:37:44

你也可以这样做。例如，您有一个链接附加到另一个链接，并且您想在将鼠标悬停在一个链接上时显示这两个链接，您只需指定每个链接的功能，然后在将两个链接悬停时立即显示即可。

.videoTitle:hover{
     color: #1270cf;
} 
.videoTitle:hover .copy{
     display: block;
}

You can also do it like this. for example you have a link attached to another link and you want to show both at hovering at one you can do it simply by specifying each individual's functions then at once at hovering both.

.videoTitle:hover{
     color: #1270cf;
} 
.videoTitle:hover .copy{
     display: block;
}

回复收藏 0 原文

兮颜 2024-08-12 16:37:44

或

.section:hover > div {
  background-color: #0CF;
}

注意
父元素状态只能影响子元素状态
所以你可以使用：

.image:hover + .layer {
  background-color: #0CF;
}
.image:hover {
  background-color: #0CF;
}

但你不能使用

.layer:hover + .image {
  background-color: #0CF;
}

.section:hover > div {
  background-color: #0CF;
}

NOTE
Parent element state can only affect a child's element state
so you can use:

.image:hover + .layer {
  background-color: #0CF;
}
.image:hover {
  background-color: #0CF;
}

but you can not use

.layer:hover + .image {
  background-color: #0CF;
}

回复收藏 0 原文

~没有更多了~

关于作者

╄→承喏

暂无简介

0 文章

0 评论

23 人气

关注发私信

友情链接

文江博客

CSS：悬停一个元素，多个元素的效果？

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

发布评论

评论（7）

关于作者

相关话题

热门标签

推荐作者

linfzu01

§对你不离不弃

可遇━不可求

枕梦

qq_3LFa8Q

JP

友情链接

CSS：悬停一个元素，多个元素的效果？

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

发布评论

评论（7）

关于作者

相关话题

热门标签

推荐作者

linfzu01

§对你不离不弃

可遇━不可求

枕梦

qq_3LFa8Q

JP

友情链接

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