在我的 HTML 代码中,当我悬停在 <a>
元素上时,我想仅使用 CSS 改变 <h1>
元素的颜色。是否有实现这一要求的方法?
<h1>Heading</h1>
<a class="button" href="#"></a>
如果我用一个带有id的div将它包裹起来呢?
<div id="banner">
<h1>Heading</h1>
<a class="button" href="#"></a>
</div>
这会有帮助吗?
在我的 HTML 代码中,当我悬停在 <a>
元素上时,我想仅使用 CSS 改变 <h1>
元素的颜色。是否有实现这一要求的方法?
<h1>Heading</h1>
<a class="button" href="#"></a>
如果我用一个带有id的div将它包裹起来呢?
<div id="banner">
<h1>Heading</h1>
<a class="button" href="#"></a>
</div>
这会有帮助吗?
h1
标签上时,可以改变a
链接的颜色,但是你不能以同样的方式影响前面的同级元素。请注意保留HTML标签。
h1 {
color: #4fa04f;
}
h1 + a {
color: #a04f4f;
}
h1:hover + a {
color: #4f4fd0;
}
a:hover + h1 {
background-color: #444;
}
<h1>Heading</h1>
<a class="button" href="#">The "Button"</a>
<h1>Another Heading</h1>
在支持它的浏览器中,现在可以使用has
选择器进行编辑。
请参阅下面CSS中的注释。
我将来会再次编辑;目前我的Chrome和Safari浏览器还没有支持它的版本。
h1 {
color: #4fa04f;
}
h1 + a {
color: #a04f4f;
}
h1:hover + a {
color: #4f4fd0;
}
a:hover + h1 {
background-color: #444;
}
/* Select an H1 heading that has an <a>nchor as a sibling */
h1:has(+ a) {
background-color: cyan;
}
/* Select an H1 heading that has a currently-hovered <a>nchor as a sibling */
h1:has(+ a:hover) {
background-color: yellow;
}
<h1>Heading</h1>
<a class="button" href="#">The "Button"</a>
<h1>Another Heading</h1>
没有任何 CSS 选择器 可以做到这一点(即使在 CSS3 中)。在 CSS 中,元素永远不会意识到其父级,因此您不能使用 a:parent h1
(例如)。它们也不知道它们的兄弟姐妹(在大多数情况下),因此您不能使用 #container a:hover { /* do something with sibling h1 */ }
。 基本上,CSS 属性无法修改除了元素及其子元素以外的任何内容(它们无法访问父级或兄弟节点)。
您可以将 h1
放到 a
元素中,但这样会使您的 h1
也能被悬停。
您只能使用 JavaScript 来实现这一点(jsFiddle 概念验证)。这看起来可能是这样的:
$("a.button").hover(function() {
$(this).siblings("h1").addClass("your_color_class");
}, function() {
$(this).siblings("h1").removeClass("your_color_class");
});
#banner:hover h1 {
color: red;
}
#banner h1:hover {
color: black;
}
a {
position: absolute;
}
<div id="banner">
<h1>Heading</h1>
<a class="button" href="#">link</a>
</div>
a
元素是绝对定位的。可能不适合您现有的结构。让我知道,我可能会找到一个解决方法。div
中不仅有h1
和a
时会变得棘手。 - Cat只需要几行CSS代码和基本的Flexbox理解,就可以实现这一点。
正如Stephen P在他的回答中所说的那样,相邻兄弟组合器可以选择紧随其后的兄弟元素。要实现OP所要求的效果,可以使用两种Flex布局方法:
Approach 1 (using "flex-flow" shorthand property)
.flex-parent {
display: flex;
flex-flow: column-reverse wrap
}
.flex-child-1:hover + .flex-child-2 {
color: #FF3333;
}
<div class="flex-parent">
<a class="flex-child-1">Hover me</a>
<h1 class="flex-child-2">I am changing color</h1>
</div>
方法二(使用“order”属性和多个子元素)
.flex-parent {
display: flex;
flex-direction: column;
}
.flex-child-1 {
order: 2;
}
.flex-child-2 {
order: 1;
}
.flex-child-3 {
order: 3;
}
.flex-child-1:hover+.flex-child-2 {
color: #FF3333;
}
<div class="flex-parent">
<h1 class="flex-child-3">I am not changing color</h1>
<a class="flex-child-1">Hover me</a>
<h1 class="flex-child-2">I am changing color</h1>
</div>
奖励:
http://plnkr.co/edit/j5kGIav1E1VMf87t9zjK?p=preview
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<style>
ul:hover > li
{
opacity: 0.5;
}
ul:hover li:hover
{
opacity: 1;
}
</style>
</head>
<body>
<h1>Hello Plunker!</h1>
<ul>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
</ul>
</body>
</html>
.parent:hover .child:not(:hover) {
/* this style affects all the children *except* the one you're hovering over */
color: red;
}
a:link {color:#FF0000;}
a:hover {color:#FF00FF;}
当你悬停时,它应该可以工作 :) 你也可以通过将其包含在 div 中并像这样进行定位来使其更具体:
.exampledivname a:link {color:#FF0000;}
.exampledivname a:hover {color:#FF00FF;}
这应该会有所帮助。
有人帮助了我,所以我想在这里分享。
在你的第一个例子中,使用纯CSS确实是不可能的。然而,当你将其包装在父容器中时,你就可以对悬停的子元素进行各种操作。
#banner:hover>h1{
color:red;
}
h1:hover{
color:black !important;
}
#banner{
display:inline-block;
}
.button{
display:inline-block;
font-size:24px;
width:100%;
border:1px solid black;
text-align:center;
}
h1{
padding:0;
margin:0;
}
<div id="banner">
<h1>Heading</h1>
<a class="button" href="#">Button!</a>
</div>
父元素只控制当前没有被悬停的子元素。然后,您可以设置单个元素和类的悬停状态,以便在没有JS的情况下进行兄弟选择。
以下是此操作的更高级示例
.features-container:has(.feature-card:hover) .feature-card {
opacity: 0.25;
}
.feature-card:hover {
opacity: 1 !important;
transform: scale(105%);
filter: drop-shadow(1px 1px 10px rgba(255, 255, 255, 0.25));
}
HTML:
<div class="features-container">
<div
onclick="window.location.href='/branding.html'"
class="feature-card"
>
<img src="/assets/home-page/1_Tyson.jpg" alt="Mike Tyson Flexing" />
<h2>Branding</h2>
</div>
<div
onclick="window.location.href='/design.html'"
class="feature-card"
>
<img
src="/assets/home-page/2_Design.jpg"
alt="Mike Tyson Flexing"
/>
<h2>Design</h2>
</div>
<div
onclick="window.location.href='/automotive.html'"
class="feature-card"
>
<img
src="/assets/home-page/3_Automotive.jpg"
alt="Mike Tyson Flexing"
/>
<h2>Automotive</h2>
</div>
<div onclick="window.location.href='/art.html'" class="feature-card">
<img src="/assets/home-page/4_Art.jpg" alt="Mike Tyson Flexing" />
<h2>Art</h2>
</div>
<div onclick="window.location.href='/more.html'" class="feature-card">
<img
src="/assets/home-page/5_Special_Services.jpg"
alt="Mike Tyson Flexing"
/>
<h2>More</h2>
</div>
</div>
这个可能有效,我最近用过这个想法来停止动画中的兄弟元素。
h1 { color: inherit; }
#banner:hover { color: your choice; }