个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
28
4
/*selector {property: value;} */
* { text-align: center;}
body {
background-image: url(photo-1511798616182-aab3698ac53e.jpg);
background-size: cover;
background-repeat: no-repeat;
color:rgba(255, 101, 101);}
h1 {
text-align: center;
border: 5px solid rgba(43, 109, 18,0.6);
cursor:pointer; }
.thetitle {font-family: georgia;
font-style:italic;}
a {
color:rgba(255, 255, 170, 0.7);
text-decoration: none;
}
a:hover {
color:rgba(212, 106, 106);
text-decoration: none;}
span{display: inline;}
h3:hover {color:rgba(229, 30, 35);}
.regi:hover {color:rgba(229, 30, 35);}
#regi3:hover {color:rgba(229, 30, 35);}
#regi4:hover {color:rgba(229, 30, 35);}
#regi5:hover {color:rgba(229, 30, 35);}
#regi6:hover {color:rgba(229, 30, 35);}
.regi7{display: inline;}
#regi7:hover {color:rgba(229, 30, 35);}
.regi {margin: 8px 0;}<!doctype html>
<html>
<head>
<title>Register</title>
<link rel="stylesheet" type="text/css" href="register.css">
</head>
<body>
<header><h1><a href="file:///C:/Users/Yonatan/Desktop/Progrems/web/register.html">Registertion page</h1></a></header>
<form method="post"> <div id="registertionpage"> <!-- change to post later-->
<div for="nickname" class="regi">Nickname:</div>
<input type="text" name="nickname" required>
<div class="regi">First Name:</div>
<input type="text" name="firstname" required>
<div class="regi">Last Name:</div>
<input type="text" name="lastname" required>
<div class="regi">Choose your password:</div>
<input type="password" name="password" minlength="10" required>
<div class="regi">Email adress: </div>
<input type="email" name="email" required>
<div class="regi">Birthday: </div>
<time><input type="date" name="birthdate"required></time>
<div class="regi">Gender:</div>
<div id="regi3"><input type="radio" name="gender" value="si"required> Male</div></br>
<div id="regi4"> <input type="radio"name="gender" value="nei"> Female</div></br>
<div id="regi5"> <input type="radio" name="gender" value="other"> Other</div></br>
<div class="regi">Do u agree to the website rules?</div>
<div id="regi6"><input type="checkbox" name="webrules" value="webrules"required> yes</div>
<div class="regi">Wanna get news?</div>
<div id="regi7"> <input type="radio" name="news" value="yes"> yes</div></br>
<div id="regi7"> <input type="radio" name="news" value="no"> no</div>
<div class="regi">Select your style:</div> <!-- change website theme with it -->
<select name="theme">
<option value="white" name="white">white</option>
<option value="red" name="red" >red</option>
<option value="black" name="black" >black</option>
<option value="green" name="green" >hentai</option>
</select><br><br><br>
<input type="submit" value="Reegister"> <input type="reset"><br><br><br>
</div></form><br>
<nav><a href="file:///C:/Users/Yonatan/Desktop/Progrems/web/webcod.html">Back</a></nav>
</body>
</html>所以我尝试将 hover 与 span 和 lable 一起使用，因为我看到当我这样做时它只会悬停在文本上但问题如果我出于某种原因这样做，{text-align:center;} 将不起作用，当我使用 div 和 p 它确实有效，但问题是它也悬停在文本附近，我不知道问题是什么..请帮忙
最佳答案
悬停在您的文本旁边触发的原因是因为 div (.regi) 是一个占据整个宽度的 block 级元素。
除此之外，您还可以做很多事情来简化您的标记。下面是一个示例，展示了如何仅使用性别单选按钮作为示例来清理它。您可以从中学习并将相同的方法应用于其余元素。
我在这里添加 wrap div 的原因是收缩包装 float 的单选按钮 + 标签。在您的设计中，左侧有单选按钮，右侧有标签，但从语义上讲，最好让标签首先出现在标记中。因此，为了在视觉上获得相同的结果，我将单选按钮向左浮动，将标签向右浮动，然后将它们放在同样 float 的 div 中以收缩包装。
.wrap {
float: left;
clear: both;
}
input[type="radio"] {
float: left;
}
label {
float: right;
}
label:hover {
color: rgba(229, 30, 35);
}<!doctype html>
<html>
<body>
<form method="post">
<div id="registertionpage">
<div class="wrap">
<label for="male">Male</label>
<input type="radio" id="male" name="gender" value="si" required>
</div>
<div class="wrap">
<label for="female">Female</label>
<input type="radio" id="female" name="gender" value="si" required>
</div>
<div class="wrap">
<label for="other">Other</label>
<input type="radio" id="other" name="gender" value="si" required>
</div>
</div>
</form>
</html>关于html - 为什么当我将 hover 与 div 一起使用时，它也会悬停在我的文本旁边？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59337047/
28
4
0
正如您在此 JSFiddle 中看到的那样，当您将鼠标悬停在 text-content 上时； opacity img 和 img 类返回到正常状态，我想保持 :hover 来自 img 和 img
在 Safari 上，CSS :hover 在具有固定位置的子级在父级外部打开然后关闭后仍然处于事件状态。 鼠标重新进入悬停区域后，它再次起作用。 演示:http://jsfiddle.net/HSC
使用 JQuery，当元素处于悬停状态时，我尝试链接几个函数。 我通常会使用.hover事件函数，但在阅读了一些教程后，我使用 .on 阅读了该函数更好，因为您可以使用一个事件处理程序来监视文档中的所
我已经解决了很多具有相似标题的已解决问题，但我尝试的似乎都没有用。 我希望将 ava.png 图像重定向到另一个页面，但是在悬停时我想要一个 :before 图像(ava_background_hoo
使用以下 html，当我将鼠标悬停在子对象上时，父对象的背景为绿色。我怎样才能阻止这种情况发生？如果我悬停在子元素之外，我确实需要绿色背景。 CSS3 很好。 .parent { padding:
我有两个默认设置为隐藏的子元素。 .child1, .child2{ visibility:hidden; } #parent :hover .child1, #parent:hover .child
所以我试图让我的分页在悬停时平滑地滑动，然后在鼠标离开元素后滑回其原始位置。我已经让它在悬停时滑动，但是当鼠标离开按钮时，它只是快速返回而不是过渡。有人可以帮我解决这个问题吗？ 这是我的代码。 #pa
我有一个 jQuery 问题；我想通过将鼠标悬停在另一个元素上来触发元素上的 :hover 事件，控制台显示错误: Uncaught RangeError: Maximum call stack si
我正在挖掘某人编写的一些 css 代码，我发现了这个: li.hover, li:hover { } .hover 和 :hover 有区别吗？ 也许某些浏览器对 hover 的行为不同？! 最佳答案
使用以下 html，当我将鼠标悬停在子对象上时，父对象的背景为绿色。我怎样才能阻止这种情况发生？如果我悬停在子元素之外，我确实需要绿色背景。 CSS3 很好。 .parent { padding:
找不到我一直想知道的问题的答案。 .class2 a:hover {} 和 .class2:hover a {} 有区别吗？还是偏爱其中之一？ 我一直在使用 .class2 a:hover {} 来改
我不确定标题是否足够好地解释它，但我试图保持简短! 因此，我在页面上散布了许多图像，并为它们创建了一个灯箱画廊(.cboxElement 是调用它的类)。我想添加的是对受灯箱影响的每个图像的悬停效果，
.vpbutton {padding:4px;background-color:#EFEFEF;} .userbox img{padding:8px;background-color:#EFE
我无法让 a:hover 元素正常工作。我是业余爱好者，所以请放轻松...我也尝试过使用#menubar:hover，但这似乎也不起作用。 此代码将进入另一个程序的 header 。我进入这个的唯一原
我到处寻找这个问题的答案，但我找不到任何相关信息。谁能告诉我我们是否可以影响接收元素悬停边界半径属性的区域。以便在击中真实区域查看元素后发生颜色等变化的效果？不要阻止在 DOM 中作为正方形物理存在？
谁能看出我在这里做错了什么？ 我在 中有一些文本元素我想要 text-decoration:none在什么时候 悬停在。请参阅下面的 HTML，我认为它应该可以工作，但是当我将鼠标悬停在 上时文字
我正在尝试创建一个可缩放的 map ，当鼠标悬停在 map 图像上时它会工作，类似于 map 在 Flickr 上的工作方式(请参阅右侧栏上的 map - http://www.flickr.com/
我有一张 table ，我有一个用于 tr:hover 效果的全局 css 代码。但有时我不想在我的 table 上使用这种悬停效果。请查看代码并告诉我如何不对该表运行效果。 JSFIDDLE .这里
我重新开发了我们的一个页面，我注意到它在 上使用悬停元素，尽管点击事件是针对 的标签。所以我将其更改为悬停在 上标签。当鼠标快速移动到每个元素上时，需要相当长的时间才能 catch 。我想没有人
我从来都不是 javascript 下拉菜单的忠实粉丝，所以当我可以使用 CSS 设计下拉菜单时，我会的。但是现在我遇到了一个小问题。 我有一个登录按钮和一个小的登录表单模块，它是按钮的兄弟。当我将鼠
我是一名优秀的程序员,十分优秀！