Fatal编程技术网
  • html/
  • Html 我有一些关于悬停和过渡效果的问题

Html 我有一些关于悬停和过渡效果的问题

html css

Html 我有一些关于悬停和过渡效果的问题,html,css,Html,Css,当我测试悬停效果和过渡效果时，它不起作用。我找不到任何问题。请帮帮我。我现在该怎么办。 有什么问题吗 <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="style.css"> </head> <body> <div class

当我测试悬停效果和过渡效果时，它不起作用。我找不到任何问题。请帮帮我。我现在该怎么办。 有什么问题吗

<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="test">
             <a href="#"><h1>This is header</h1></a>
             <div class="images"><img src="img/them.jpg" alt="" /></div>
        </div>
    </div>
</body>
</html>
您的HTML与您编写的规则不匹配：

 .test h1:hover .images {
    display:none;
}
您可能会尝试做以下几件事：

 .test a:hover + .images {
    display:none;
}
当您将鼠标悬停在
h1
上时，将隐藏
.images
。但是，由于h1位于
的内部，因此您需要将其删除，或者在
上放置一个类，并引用该类而不是h1。或者，您可以将images div移动到h1中，它将与现有规则匹配。

您的HTML与您编写的规则不匹配：

 .test h1:hover .images {
    display:none;
}
您可能会尝试做以下几件事：

 .test a:hover + .images {
    display:none;
}
当您将鼠标悬停在
h1
上时，将隐藏
.images
。但是，由于h1位于
的内部，因此您需要将其删除，或者在
上放置一个类，并引用该类而不是h1。或者您可以将images div移动到h1中，它将与现有规则匹配。

我相信您缺少同级选择器：

.test a:hover ~ .images {
  display: none;
}
片段：

.container{
宽度：900px；
保证金：0自动；
}
.test{}
.测试h1{
字体大小：30px；
位置：相对位置；
}
.图像{
宽度：258px；
位置：绝对位置；
右：100px；
不透明度：1；
转变：不透明度。5s；
}
.图像img{
宽度：100%；
}
.测试a:悬停~.图像{
不透明度：0；
}
我认为您缺少一个兄弟选择器：

.test a:hover ~ .images {
  display: none;
}
片段：

.container{
宽度：900px；
保证金：0自动；
}
.test{}
.测试h1{
字体大小：30px；
位置：相对位置；
}
.图像{
宽度：258px；
位置：绝对位置；
右：100px；
不透明度：1；
转变：不透明度。5s；
}
.图像img{
宽度：100%；
}
.测试a:悬停~.图像{
不透明度：0；
}
@zgood它就在
a
@thomasytes里面，你是对的。。。一定错过了，我用标签试过了。但它仍然不是working@Runa您尚未接受之前任何问题的答案@zgood它就在
a
@thomasytes里面你是对的。。。一定错过了，我用标签试过了。但它仍然不是working@Runa您尚未接受之前任何问题的答案<代码>测试h1：悬停+。图像将不起作用<代码>+用于选择紧跟在另一个元素之后的元素
.images
紧跟在
a
标记之后，而不是
h1
标记之后。这不起作用，因为
h1
在
a
之内，而不是
之前的兄弟姐妹。images
Aw，ninja'd.：（这就是我后来添加解释的原因。但是我已经更改了答案，以反映CSS应该如何工作，而不是我认为他们试图完成的工作。
。测试h1:hover+。images
不起作用。
+
用于选择紧跟在另一个元素之后的元素。
。images
是immedi在
a
标记之后不是
h1
标记。这不起作用，因为
h1
在
a
之内，并且在
之前不是兄弟姐妹。图像
Aw，忍者d.：（这就是我后来添加解释的原因。但是我改变了答案，以反映CSS应该如何工作，而不是我认为他们试图完成的工作。我相信这是最好的方法，尽管将悬停伪类指定给
a
元素可能会让人困惑，特别是如果标题更改。也许将图像移动到与标题相同的级别，并使用带有
h1
的同级选择器是一个更好的解决方案。您能告诉我为什么我的过渡效果不起作用吗？@Runa您可以使用
不透明度
CSS属性实现类似的效果。检查我上面更新的答案。您的
过渡on
属性值不正确。但如果我想在不隐藏照片的情况下将照片移到左侧，我该怎么办？使用转换effect@Runa请用第二段代码检查我的更新答案。请阅读我提到的
转换
相关文档。我相信这是最好的方法，尽管指定了悬停伪c添加到
a
元素可能会让人困惑，尤其是当标题的位置属性发生变化时。也许将图像移动到与标题相同的级别，并将同级选择器与
h1
一起使用可能是更好的解决方案。您能告诉我为什么我的转换效果不起作用吗？@Runa您可以实现类似的效果使用
opacity
CSS属性的增强现实效果。请检查我上面更新的答案。您的
transition
属性值不正确。但是如果我想在不隐藏的情况下将照片移到左侧，我该怎么办？使用transitioneffect@Runa请用第二个片段检查我的更新答案。阅读
转换
re我提到的最新文件。