单击 HTML 页面中的任意位置时出现问题
[英]Problem on clicking anywhere in the HTML page
问题描述
<head> <title>Learn Coding Online | Treehouse</title> <link type="text/css" rel="stylesheet" href="stylesheet.css"> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap" rel="stylesheet"> </head>
I created a webpage using HTML and CSS.
我使用 HTML 和 CSS 创建了一个网页。 Whenever I click anywhere in the page all the elements go to random positions and when I release the click they become normal again.每当我单击页面中的任何位置时，所有元素 go 都会随机定位，当我释放单击时，它们会再次正常。 I have attached the snippet and it looks completely fine.我附上了片段，它看起来完全没问题。 For seeing the problem I am providing the website link-https://whitiger26.github.io/try2/为了看到问题，我提供了网站链接-https://whitiger26.github.io/try2/
Can someone please point out the reason behind this.有人可以指出这背后的原因。
Thanks in advance.提前致谢。
PS- I am new here so please ignore mistakes. PS-我是新来的，所以请忽略错误。
3 个解决方案
解决方案1
0 2021-06-06 06:35:38
Ok I figured out your issue.好的，我发现了你的问题。
In your "stylesheet.css" you have this code:在您的“stylesheet.css”中，您有以下代码：
.subm ul li a:hover,:active{
padding-left: 85.6px;
padding-right: 85.6px;
padding-bottom: 27px;
border-bottom: 3px solid #387bab;
color: #387BAB;
}
You need to remove , :active because in css the way you have it, that's calling for literally anything and everything when "active" to by styled like that.您需要删除, :active因为在 css 中，就像您拥有它的方式一样，这实际上是在“活动”时要求任何东西和所有东西。 Which is why your clicking everything problem changes everything.这就是为什么您点击一切问题会改变一切的原因。
解决方案2
0 已采纳 2021-06-06 06:54:41
.subm ul li a:hover, .subm ul li a:active{ /* This line is changed */
padding-left: 85.6px;
padding-right: 85.6px;
padding-bottom: 27px;
border-bottom: 3px solid #387bab;
color: #387BAB;
}
.subm ul li a:hover, :active it basically select two elements .subm ul li a:hover and *:active and due to this it selects all the elements in that page on click and apply that CSS code on them. .subm ul li a:hover, :active it basically select two elements .subm ul li a:hover and *:active and due to this it selects all the elements in that page on click and apply that CSS code on them.
解决方案3
0 2021-06-06 07:07:17
Remove the same style from hover and active.从 hover 中删除相同的样式并激活。
.input:active{
border: 2px solid rgb(136, 135, 135);
}
.subm ul li a{
border-bottom: 3px solid transparent;
}
.subm ul li a{
border-bottom: 3px solid transparent;
}
.subm ul li a:hover, .subm ul li a:active{
border-bottom: 3px solid #387bab;
color: #387BAB;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.