个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
26
4
我正在我的网站上制作图像 slider 。我的每一侧都有两个 FA 箭头图标。它们都旋转了 90 度以指向外。我还有一个 :hover 伪类，用于在悬停时缩放大小。然而，虽然这会缩放大小，但它也会将箭头旋转回其开始的位置。这是为什么，我似乎找不到可靠的答案。
const ham = document.querySelector('.nav-box');
const menu = document.querySelector('.menu');
const menuClose = document.querySelector('#menu-close');
ham.addEventListener('click', function() {
ham.classList.add('ham-open');
menu.style.marginLeft = '50px';
})
menuClose.addEventListener('click', function() {
ham.classList.remove('ham-open');
menu.style.marginLeft = '-700px';
})
window.sr = ScrollReveal();;
sr.reveal('.info', {
duration: 2000,
origin: 'bottom';
})html, body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header {
background: url(img/mex-9.jpg);
width: 100vw;
height: 100vh;
background-size: cover;
background-attachment: fixed;
background-position: center;
display: flex;
}
.nav-wrap {
flex-basis: 40%;
}
.nav-wrap i {
color: white;
font-size: 2rem;
position: absolute;
right: -33px;
top: 0px;
transition: all .1s ease;
}
.nav-wrap i:hover {
cursor: pointer;
transform: scale(1.15);
}
.nav-box {
margin-left: 50px;
margin-top: 100px;
max-width: 70px;
cursor: pointer;
position: fixed;
}
.b1, .b2, .b3 {
width: 70px;
height: 8.5px;
border-radius: 5px;
background-color: #fff;
margin-bottom: 10px;
transition: all .25s ease;
}
.b1 {
background-color: #56ff47;
}
.b3 {
background-color: #ff4c4c;
}
.ham-open .b1 {
background-color: #56ff47;
transform: translateY(100px);
position: relative;
z-index: 1;
}
.ham-open .b2 {
transform: translateY(81.5px);
width: 110px;
position: relative;
left: 60px;
z-index: 0;
}
.ham-open .b3 {
background-color: #ff4c4c;
transform: translateY(63px);
width: 140px;
position: relative;
left: 160px;
z-index: 2;
}
.menu {
display: flex;
border-left: 8px solid #56ff47;
flex-direction: column;
background-color: #fff;
margin-left: -700px;
width: 292px;
padding-top: 10px;
padding-bottom: 10px;
position: fixed;
border-radius: 5px;
top: 225px;
transition: all .25s;
}
.menu a {
text-decoration: none;
color: limegreen;
font-family: 'Kumar One Outline';
font-size: 2.3rem;
text-align: center;
margin-top: 12px;
margin-bottom: 12px;
transition: all .5s ease;
}
a:hover {
color: #007001;
}
.info-wrap {
flex-basis: 60%;
}
.info {
font-family: 'Cedarville Cursive';
color: white;
font-weight: bold;
font-size: 4.5rem;
text-align: center;
margin-top: 60px;
}
.logo-wrap {
display: flex;
justify-content: center;
flex-direction: column;
}
.logo-wrap div {
font-family: 'Staatliches';
color: white;
font-size: 13rem;
font-weight: bold;
letter-spacing: 10px;
margin-bottom: -5rem;
position: relative;
margin-left: auto;
margin-right: auto;
}
/*------ABOUT------*/
.about-section {
background-color: #35ad37;
}
.about-section h1 {
text-align: center;
font-size: 4.5rem;
margin-top: 0;
margin-bottom: 30px;
padding-top: 15px;
color: white;
font-family: 'Cedarville Cursive';
font-weight: bold;
}
.about-wrap {
display: flex;
padding-bottom: 80px;
}
.about-info, .image-slider-wrap {
flex-basis: 50%;
}
.about-info p {
color: white;
font-family: 'Josefin Sans';
font-size: 2rem;
margin-left: 100px;
margin-bottom: 0;
margin-top: 0;
}
.image-slider {
width: 650px;
height: 400px;
background-color: red;
border-radius: 13px;
margin-left: auto;
margin-right: auto;
position: relative;
}
.image-slider i {
color: white;
font-size: 5rem;
position: absolute;
top: 50%;
margin-top: -40px;
transition: all .1s ease;
cursor: pointer;
}
#left {
transform: rotate(-90deg);
left: -30px;
}
#right {
transform: rotate(90deg);
right: -30px;
}
#left:hover {
transform: rotate(-90deg);
transform: scale(1.3);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mexican Restaurant</title>
<link href="https://fonts.googleapis.com/css?family=Cedarville+Cursive|Josefin+Sans|Kumar+One+Outline|Staatliches" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="header">
<div class="nav-wrap">
<div class="nav-box">
<div class="b1"></div>
<div class="b2"></div>
<div class="b3"></div>
</div>
<div class="menu">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Menu</a>
<a href="#">Contact</a>
<a href="#">Location</a>
<i class="fas fa-times" id="menu-close"></i>
</div>
</div>
<div class="info-wrap">
<p class="info">Authentic Mexican Food</p>
<div class="logo-wrap">
<div>YOUR</div>
<div>LOGO</div>
<div>HERE</div>
</div>
</div>
</div>
</header>
<main>
<div class="about-section">
<h1 class="about-h1">About Us</h1>
<div class="about-wrap">
<div class="about-info">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias voluptas pariatur consequuntur, repellat, laborum, rerum ipsum illo excepturi mollitia reprehenderit saepe nisi praesentium voluptate ab repellendus quos impedit, soluta natus dolore. Praesentium debitis odio cupiditate, reprehenderit alias. Sequi non beatae tempore fugit quia? Ratione aspernatur, quidem voluptates dignissimos Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque quo iure accusantium cupiditate hic, iste ab laborum incidunt neque a nihil, veritatis cumque quaerat, id laboriosam, labore eaque delectus perspiciatis.</p>
</div>
<div class="image-slider-wrap">
<div class="image-slider">
<i class="fas fa-sort-up" id="left"></i>
<i class="fas fa-sort-up" id="right"></i>
</div>
</div>
</div>
</div>
</main>
<footer>
</footer>
</body>
<script src="https://unpkg.com/scrollreveal"></script>
<script src="script.js"></script>
</html>最佳答案
您必须将两个transform 参数放在一个 行/规则中，如下所示:
变换:旋转(-90deg) 缩放(1.3);
否则它们充当两条规则，其中第二条规则覆盖第一条。
const ham = document.querySelector('.nav-box');
const menu = document.querySelector('.menu');
const menuClose = document.querySelector('#menu-close');
ham.addEventListener('click', function() {
ham.classList.add('ham-open');
menu.style.marginLeft = '50px';
})
menuClose.addEventListener('click', function() {
ham.classList.remove('ham-open');
menu.style.marginLeft = '-700px';
})
window.sr = ScrollReveal();;
sr.reveal('.info', {
duration: 2000,
origin: 'bottom';
})html, body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header {
background: url(img/mex-9.jpg);
width: 100vw;
height: 100vh;
background-size: cover;
background-attachment: fixed;
background-position: center;
display: flex;
}
.nav-wrap {
flex-basis: 40%;
}
.nav-wrap i {
color: white;
font-size: 2rem;
position: absolute;
right: -33px;
top: 0px;
transition: all .1s ease;
}
.nav-wrap i:hover {
cursor: pointer;
transform: scale(1.15);
}
.nav-box {
margin-left: 50px;
margin-top: 100px;
max-width: 70px;
cursor: pointer;
position: fixed;
}
.b1, .b2, .b3 {
width: 70px;
height: 8.5px;
border-radius: 5px;
background-color: #fff;
margin-bottom: 10px;
transition: all .25s ease;
}
.b1 {
background-color: #56ff47;
}
.b3 {
background-color: #ff4c4c;
}
.ham-open .b1 {
background-color: #56ff47;
transform: translateY(100px);
position: relative;
z-index: 1;
}
.ham-open .b2 {
transform: translateY(81.5px);
width: 110px;
position: relative;
left: 60px;
z-index: 0;
}
.ham-open .b3 {
background-color: #ff4c4c;
transform: translateY(63px);
width: 140px;
position: relative;
left: 160px;
z-index: 2;
}
.menu {
display: flex;
border-left: 8px solid #56ff47;
flex-direction: column;
background-color: #fff;
margin-left: -700px;
width: 292px;
padding-top: 10px;
padding-bottom: 10px;
position: fixed;
border-radius: 5px;
top: 225px;
transition: all .25s;
}
.menu a {
text-decoration: none;
color: limegreen;
font-family: 'Kumar One Outline';
font-size: 2.3rem;
text-align: center;
margin-top: 12px;
margin-bottom: 12px;
transition: all .5s ease;
}
a:hover {
color: #007001;
}
.info-wrap {
flex-basis: 60%;
}
.info {
font-family: 'Cedarville Cursive';
color: white;
font-weight: bold;
font-size: 4.5rem;
text-align: center;
margin-top: 60px;
}
.logo-wrap {
display: flex;
justify-content: center;
flex-direction: column;
}
.logo-wrap div {
font-family: 'Staatliches';
color: white;
font-size: 13rem;
font-weight: bold;
letter-spacing: 10px;
margin-bottom: -5rem;
position: relative;
margin-left: auto;
margin-right: auto;
}
/*------ABOUT------*/
.about-section {
background-color: #35ad37;
}
.about-section h1 {
text-align: center;
font-size: 4.5rem;
margin-top: 0;
margin-bottom: 30px;
padding-top: 15px;
color: white;
font-family: 'Cedarville Cursive';
font-weight: bold;
}
.about-wrap {
display: flex;
padding-bottom: 80px;
}
.about-info, .image-slider-wrap {
flex-basis: 50%;
}
.about-info p {
color: white;
font-family: 'Josefin Sans';
font-size: 2rem;
margin-left: 100px;
margin-bottom: 0;
margin-top: 0;
}
.image-slider {
width: 650px;
height: 400px;
background-color: red;
border-radius: 13px;
margin-left: auto;
margin-right: auto;
position: relative;
}
.image-slider i {
color: white;
font-size: 5rem;
position: absolute;
top: 50%;
margin-top: -40px;
transition: all .1s ease;
cursor: pointer;
}
#left {
transform: rotate(-90deg);
left: -30px;
}
#right {
transform: rotate(90deg);
right: -30px;
}
#left:hover {
transform: rotate(-90deg) scale(1.3);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mexican Restaurant</title>
<link href="https://fonts.googleapis.com/css?family=Cedarville+Cursive|Josefin+Sans|Kumar+One+Outline|Staatliches" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="header">
<div class="nav-wrap">
<div class="nav-box">
<div class="b1"></div>
<div class="b2"></div>
<div class="b3"></div>
</div>
<div class="menu">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Menu</a>
<a href="#">Contact</a>
<a href="#">Location</a>
<i class="fas fa-times" id="menu-close"></i>
</div>
</div>
<div class="info-wrap">
<p class="info">Authentic Mexican Food</p>
<div class="logo-wrap">
<div>YOUR</div>
<div>LOGO</div>
<div>HERE</div>
</div>
</div>
</div>
</header>
<main>
<div class="about-section">
<h1 class="about-h1">About Us</h1>
<div class="about-wrap">
<div class="about-info">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias voluptas pariatur consequuntur, repellat, laborum, rerum ipsum illo excepturi mollitia reprehenderit saepe nisi praesentium voluptate ab repellendus quos impedit, soluta natus dolore. Praesentium debitis odio cupiditate, reprehenderit alias. Sequi non beatae tempore fugit quia? Ratione aspernatur, quidem voluptates dignissimos Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque quo iure accusantium cupiditate hic, iste ab laborum incidunt neque a nihil, veritatis cumque quaerat, id laboriosam, labore eaque delectus perspiciatis.</p>
</div>
<div class="image-slider-wrap">
<div class="image-slider">
<i class="fas fa-sort-up" id="left"></i>
<i class="fas fa-sort-up" id="right"></i>
</div>
</div>
</div>
</div>
</main>
<footer>
</footer>
</body>
<script src="https://unpkg.com/scrollreveal"></script>
<script src="script.js"></script>
</html>关于css - 为什么 Font Awesome 图标在使用 :hover to scale its size? 时会旋转回原来的位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56159490/
26
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 设计下拉菜单时，我会的。但是现在我遇到了一个小问题。 我有一个登录按钮和一个小的登录表单模块，它是按钮的兄弟。当我将鼠
我是一名优秀的程序员,十分优秀！