- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我的问题是为什么菜单中的链接在悬停或访问时没有设置样式。这个元素的唯一特点是菜单位于标题内,它本身仅在悬停时显示(我创建了一个“可悬停的”不可见 div,不知道更好的方法)。我猜这两种“悬停”状态(?)之间存在某种冲突,一种是包含链接的 header ,另一种是链接本身。这是它的外观的 gif:
代码如下:
@font-face {
font-family: Eagle-Light;
src: url("Eagle-Light.otf") format("opentype");
}
@font-face {
font-family: Raleway Light;
src: url("Raleway Light.otf") format("opentype");
}
.cf:before,
.cf:after {
content: "";
display: table;
}
.cf:after {
clear: both;
}
html,
body {
margin: 0px;
padding: 0px;
height: 100vh;
}
#header {
position: absolute;
width: 100vw;
height: 10vh;
background-color: rgba(0, 0, 0, 0);
opacity: 1;
z-index: 6;
top: -40px;
transition: top 1s ease, background-color 1s ease;
}
#hoverable {
position: absolute;
height: 10vh;
width: 100%;
z-index: 7;
}
#hoverable:hover #header {
background-color: rgba(0, 0, 0, .3);
top: 0px;
}
#hoverable:hover #header #title h1 {
color: rgba(129, 129, 129, 1);
top: 0px;
}
#hoverable:hover #header #title h1 #parana {
color: rgba(255, 255, 255, 1);
top: 0px;
}
#hoverable:hover #menu ul li a {
color: rgba(255, 255, 255, 1);
}
#title {
margin-left: 10vw;
line-height: 10vh;
float: left;
}
#footer {
position: relative;
height: 10%;
width: 100%;
background-color: red;
display: none;
opacity: .5;
}
#container {
height: 100%;
width: 100vw;
background-color: white;
min-height: 580px;
text-align: center;
background-color: blue;
}
.notVisible {
opacity: 0;
}
.visible {
opacity: 1;
transition: opacity 0.7s ease-in-out;
}
#imagewrap {
position: relative;
z-index: 5;
display: inline-block;
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
#front {
position: absolute;
top: -9999px;
bottom: -9999px;
left: -9999px;
right: -9999px;
margin: auto;
height: 110%;
}
#container #imagewrap:hover .buttons {
opacity: 1;
}
.buttons {
cursor: pointer;
z-index: 3;
opacity: 0;
transition: opacity .3s ease-in-out;
top: 50%;
transform: translateY(-50%);
}
#previous {
left: 5px;
background-image: url(Images/carremoins.png);
background-repeat: no-repeat;
background-position: center center;
width: 20px;
height: 20px;
z-index: 4;
position: absolute;
}
#next {
right: 5px;
background-image: url(Images/carreplus.png);
background-repeat: no-repeat;
background-position: center center;
width: 20px;
height: 20px;
z-index: 4;
position: absolute;
}
#tag {
position: relative;
height: 40px;
line-height: 1.7em;
padding-top: 5px;
text-align: center;
font-size: 1.1em;
}
p {
color: #818181;
font-family: Eagle-Light;
line-height: 1.7em;
padding: 0px;
margin: 0px;
font-size: 0.5em;
letter-spacing: 0.21em;
}
h1 {
color: rgba(129, 129, 129, 0);
transition: color 1s ease;
font-family: Eagle-Light;
height: 100%;
margin-top: 10px;
padding: 0px;
margin: 0px;
font-size: 2em;
letter-spacing: 0.3em;
padding: auto 0;
}
#parana {
color: rgba(255, 255, 255, 0);
transition: color 1s ease;
}
#menu {
line-height: 10vh;
float: right;
margin-right: 5vw;
}
li,
ul {
padding: 0;
margin: 0;
list-style: none;
float: right;
}
li a {
display: block;
line-height: 10vh;
padding: 0 1em;
font-size: 1.3em;
color: rgba(255, 255, 255, 0);
transition: color 1s ease;
text-decoration: none;
}
ul {
margin-right: 2em;
}
a:visited {
text-decoration: none;
color: pink;
}
a:hover {
color: red;
}
#bgvid {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
transform: translateX(-50%) translateY(-50%);
background-size: cover;
}
@media screen and (min-width: 1450px) and (max-width: 1675px) {
#front {
height: 900px;
}
}
@media screen and (min-width: 1675px) and (max-width: 2000px) {
#front {
height: 1000px;
}
}
@media screen and (min-width: 2001px) {
#front {
height: 1100px;
}
}
<audio autoplay>
<source src="paranaMusic.mp4" type="audio/mpeg">
</audio>
<video playsinline autoplay id="bgvid" class="visible">
<source src="Images/01PARANA/noSound.mp4" type="video/mp4">
</video>
<div id="hoverable">
<div id="header">
<div id="title">
<h1>MAX RUIZ <span id="parana">PARANÁ</span></h1>
</div>
<nav class="cf" id="menu">
<ul>
<li><a href="about.html">about</a></li>
<li><a href="gallery.html">gallery</a></li>
<li><a href="contact.html">contact</a></li>
<li><a href="shop.html">shop</a></li>
</ul>
</nav>
</div>
<div id="container">
<div id="imagewrap" class="notVisible">
<img src="Images/01PARANA/Image1.jpg" id="front" />
<div id="previous" class="buttons" onclick="change(-1);"></div>
<div id="next" class="buttons" onclick="change(1);"></div>
</div>
</div>
<div id="footer">
</div>
最让我困惑的是,选择器 a:visited 的属性“text-decoration”的值“none”被应用,但已访问或悬停的链接上没有颜色。知道为什么吗?感谢您的宝贵时间
最佳答案
尝试:
.......
#hoverable:hover #header #title h1 #parana {
color: rgba(255, 255, 255, 1);
top: 0px;
}
// my code (start)
#hoverable #menu ul li a {
color: white;
}
#hoverable #menu ul li a:hover {
/* color: rgba(255, 255, 255, 1); */
color: red;
}
// my code (end)
#title {
margin-left: 10vw;
line-height: 10vh;
float: left;
}
.......
关于html - 悬停或访问时链接不会样式化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42808625/
我是 python 的新手。我试图找到我的文本的频率分布。这是代码, import nltk nltk.download() import os os.getcwd() text_file=open(
我对安卓 fragment 感到困惑。我知道内存 fragment 但无法理解什么是 android fragment 问题。虽然我发现很多定义,比如 Android fragmentation re
尝试对 WordPress 进行 dockerise 我发现了这个场景: 2个数据卷容器,一个用于数据库(bbdd),另一个用于wordpress文件(wordpress): sudo docker
这个问题已经有答案了: From the server is there a way to know that my page is being loaded in an Iframe (1 个回答)
我正在玩小型服务器,试图对运行在其上的服务进行docker化。为简化起见,假设我必须主要处理:Wordpress和另一项服务。 在Docker集线器上有许多用于Wordpress的图像,但是它们似乎都
我想要发生的是,当帐户成功创建后,提交的表单应该消失,并且应该出现一条消息(取决于注册的状态)。 如果成功,他们应该会看到一个简单的“谢谢。请检查您的电子邮件。” 如果不是,那么他们应该会看到一条适当
就是这样,我需要为客户添加一个唯一标识符。通过 strip 元数据。这就是我现在完全构建它的方式,但是我只有最后一部分告诉我用户购买了哪个包。 我试着看这里: Plans to stripe 代码在这
我有一个类将执行一些复杂的操作,涉及像这样的一些计算: public class ComplexAction { public void someAction(String parameter
这个问题已经有答案了: maven add a local classes directory to module's classpath (1 个回答) 已关闭10 年前。 我有一些不应更改的旧 E
我使用 fragment 已经有一段时间了,但我经常遇到一个让我烦恼的问题。 fragment 有时会相互吸引。现在,我设法为此隔离了一个用例,它是这样的: Add fragment A(也使用 ad
我的 html 中有一个 ol 列表,上面有行条纹。看起来行条纹是从数字后面开始的。有没有办法让行条纹从数字开始? 我已经包含了正在发生的事情的片段 h4:nth-child(even) {
如何仅使用 css 将附加图像 html 化? 如果用纯 css 做不到,那我怎么能至少用一个图像来做 最佳答案 这不是真正的问题,而是您希望我们为您编写代码。我建议您搜索“css breadcrum
以下是 Joshua 的 Effective Java 的摘录: If you do synchronize your class internally, you can use various te
在这里工作时,我们有一个框向业务合作伙伴提供 XML 提要。对我们的提要的请求是通过指定查询字符串参数和值来定制的。其中一些参数是必需的,但很多不是。 例如,我们要求所有请求都指定一个 GUID 来标
我有 3 个缓冲区,其中包含在 32 位处理器上运行的 R、G、B 位数据。 我需要按以下方式组合三个字节: R[0] = 0b r1r2r3r4r5r6r7r8 G[0] = 0b g1g2g3g4
我最近发现了关于如何使用 History.js、jQuery 和 ScrollTo 通过 HTML5 History API 对网站进行 Ajax 化的要点:https://github.com/br
我们有一个 Spring Boot 应用程序,由于集成需要,它变得越来越复杂——比如在你这样做之后发送一封电子邮件,或者在你之后广播一条 jms 消息等等。在寻找一些更高级别的抽象时,我遇到了 apa
我正在尝试首次实施Google Pay。我面临如何指定gateway和gatewayMarchantId的挑战。 我所拥有的是google console帐户,不知道在哪里可以找到此信息。 priva
昨天下午 3 点左右,我为两个想要从一个 Azure 帐户转移到另一个帐户的网站设置了 awverify 记录。到当天结束时,Azure 仍然不允许我添加域,所以我赌了一把,将域和 www 子域重新指
我正在使用terms facet在elasticsearch服务器中获取顶级terms。现在,我的标签"indian-government"不被视为一个标签。将其视为"indian" "governm
我是一名优秀的程序员,十分优秀!