[英]How to apply CSS to other elements except the hovered one?
On the web you will see the last time a lot of beautiful hover effects, especially for a portfolio page, where, when you hover over an item, the other once will be get a lower opacity, so the one you hover on is highlighted. 在网络上你会看到最后一次很多漂亮的悬停效果,特别是对于一个投资组合页面,当你将鼠标悬停在一个项目上时,另一次将获得较低的不透明度,因此你悬停的那个突出显示。
I tried to accomplished this effect and I finished with this (also a more extensive one in CodePen ): 我试图完成这个效果,我完成了这个(在CodePen中也更广泛):
a { text-decoration: none; transition: color 0.1s linear; -moz-transition: color 0.1s linear; -webkit-transition: color 0.1s linear; -o-transition: color 0.1s linear; } a:link, a:visited { color: inherit; } /* Body color */ a:hover, a:active { color: #d7354a; } h1, h2, h3, h4, h5, h6 { font-weight: normal; /*margin: 16px 0;*/ } h1 { font-family: "Adelle", Arial, sans-serif; font-size: 80px; line-height: 90px; } h3, h4 { color: #000; } h3 { font-size: 28px; /* 28px / 16px = 100% */ font-weight: 600; line-height: 38px; } .txt-center { text-align: center; } body { margin: auto; font-family: "Merriweather", Arial, sans-serif; font-size: 18px; /* 18px = 100% */ line-height: 26px; letter-spacing: 1px; color: #6f6f6f; -webkit-font-smoothing: none; -webkit-font-smoothing: subpixel-antialiased; -webkit-font-smoothing: antialiased; } section { padding: 80px 0; position: relative; } #register div:hover .group { opacity: .5; } #register div .group:hover { opacity: 1; } #register hgroup { margin-bottom: 80px; } #register .group a { display: block; color: #333; } #register .group a:hover .button { background: #FFF; color: #d7354a; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } #register .group figure { margin-bottom: 30px; } #register .group figure img { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; -moz-transition-property: transform; -o-transition-property: transform; transition-property: transform; -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; } #register .group:hover figure img { -webkit-transform: translateY(-6px); transform: translateY(-6px); } #register .group p:first-of-type { font-family: "Ubuntu", Arial, sans-serif; font-size: 22px; font-weight: 500; } #register .group h3 { font-size: 70px; line-height: 100px; font-weight: 400; color: inherit; text-transform: lowercase; }
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <main class="main"> <section class="page-header" id="register"> <div class="container"> <div class="row"> <hgroup class="col-md-10 col-md-offset-1 txt-center"> <h1> Register </h1> </hgroup><!-- End hgroup.col-md-10 col-md-offset-1 --> <div class="col-md-6 group txt-center"> <a href="#"> <figure> <img src="http://placehold.it/120x120" alt="Register as Watcher"> </figure> <p>Register as</p> <h3>Watcher</h3> <p> Suspendisse sodales ut neque ut facilisis. <br> Cras lobortis vestibulum varius. </p> <div class="button secondary">I am a watcher</div> </a> </div><!-- End div.col-md-6 group txt-center --> <div class="col-md-6 group txt-center"> <a href="#"> <figure> <img src="http://placehold.it/120x120" alt="Register as Vlogger"> </figure> <p>Register as</p> <h3>Vlogger</h3> <p> Suspendisse sodales ut neque ut facilisis. <br> Cras lobortis vestibulum varius. </p> <div class="button secondary">I am a vlogger</div> </a> </div><!-- End div.col-md-6 group txt-center --> </div><!-- End div.row --> </div><!-- End div.container --> </section><!-- End section#hero --> </main>
But the problem here is, when your cursor is already in a certain area (around the "Register" text), it will give both items a lower opacity. 但问题是,当光标已经在某个区域(“注册”文本周围)时,它会使两个项目的不透明度降低。 And that's not what I want.
这不是我想要的。 What I want is, that when you hover over the div
.group
it will give the other one a lower opacity. 我想要的是,当你将鼠标悬停在div
.group
,它将为另一个人提供较低的不透明度。
I know you can reach this with jQuery, but I know also this should be possible with CSS only . 我知道你可以用jQuery达到这个目的,但我知道这也应该只用CSS 。 How can I achieve what I am looking for?
我怎样才能实现我想要的目标?
The solution is actually simple considering how far you'd have actually got to in terms of achieving it. 考虑到实现目标的实际程度,解决方案实际上很简单。
The following are the fixes that I had done: 以下是我所做的修复:
opacity
of all sibling .group
elements to 1 when the mouse is over the hgroup
which has the "Register" text. hgroup
时,将所有同级.group
元素的opacity
设置为1。 margin-bottom: 80px
on the hgroup
to padding-bottom: 80px
because margin is not a part of the element whereas the area occupied by the padding is. margin-bottom: 80px
hgroup
上的margin-bottom: 80px
到padding-bottom: 80px
因为边距不是元素的一部分,而填充占用的区域是。 Hence, the hgroup:hover
selector would apply even when the mouse is over the space below the "Register" button (but not inside the .group
itself). .group
本身内), hgroup:hover
选择器也会应用。 margin-left: 0px
to the hgroup
because the Bootstrap CSS was by default giving the hgroup
element a 80px left margin which was causing problems to the hgroup:hover
selector. hgroup
添加了一个margin-left: 0px
,因为默认情况下Bootstrap CSS为hgroup
元素提供了80px的左边距,这导致hgroup:hover
选择器出现问题。 In the below snippet, I have also added a black border around the hgroup
and .group
elements for you to see the boundaries. 在下面的代码片段中,我还在
hgroup
和.group
元素周围添加了一个黑色边框,供您查看边界。
a { text-decoration: none; transition: color 0.1s linear; -moz-transition: color 0.1s linear; -webkit-transition: color 0.1s linear; -o-transition: color 0.1s linear; } a:link, a:visited { color: inherit; } /* Body color */ a:hover, a:active { color: #d7354a; } h1, h2, h3, h4, h5, h6 { font-weight: normal; /*margin: 16px 0;*/ } h1 { font-family: "Adelle", Arial, sans-serif; font-size: 80px; line-height: 90px; } h3, h4 { color: #000; } h3 { font-size: 28px; /* 28px / 16px = 100% */ font-weight: 600; line-height: 38px; } .txt-center { text-align: center; } body { margin: auto; font-family: "Merriweather", Arial, sans-serif; font-size: 18px; /* 18px = 100% */ line-height: 26px; letter-spacing: 1px; color: #6f6f6f; -webkit-font-smoothing: none; -webkit-font-smoothing: subpixel-antialiased; -webkit-font-smoothing: antialiased; } section { padding: 80px 0; position: relative; } #register div:hover .group { opacity: .5; } #register hgroup:hover ~ .group { opacity: 1; } #register div .group:hover { opacity: 1; } #register hgroup { padding-bottom: 80px; width: 100%; margin-left: 0; } #register .group a { display: block; color: #333; } #register .group a:hover .button { background: #FFF; color: #d7354a; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } #register .group figure { margin-bottom: 30px; } #register .group figure img { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; -moz-transition-property: transform; -o-transition-property: transform; transition-property: transform; -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; } #register .group:hover figure img { -webkit-transform: translateY(-6px); transform: translateY(-6px); } #register .group p:first-of-type { font-family: "Ubuntu", Arial, sans-serif; font-size: 22px; font-weight: 500; } #register .group h3 { font-size: 70px; line-height: 100px; font-weight: 400; color: inherit; text-transform: lowercase; } hgroup, .group{ border: 1px solid; }
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <main class="main"> <section class="page-header" id="register"> <div class="container"> <div class="row"> <hgroup class="col-md-10 col-md-offset-1 txt-center"> <h1> Register </h1> </hgroup><!-- End hgroup.col-md-10 col-md-offset-1 --> <div class="col-md-6 group txt-center"> <a href="#"> <figure> <img src="http://placehold.it/120x120" alt="Register as Watcher"> </figure> <p>Register as</p> <h3>Watcher</h3> <p> Suspendisse sodales ut neque ut facilisis. <br> Cras lobortis vestibulum varius. </p> <div class="button secondary">I am a watcher</div> </a> </div><!-- End div.col-md-6 group txt-center --> <div class="col-md-6 group txt-center"> <a href="#"> <figure> <img src="http://placehold.it/120x120" alt="Register as Vlogger"> </figure> <p>Register as</p> <h3>Vlogger</h3> <p> Suspendisse sodales ut neque ut facilisis. <br> Cras lobortis vestibulum varius. </p> <div class="button secondary">I am a vlogger</div> </a> </div><!-- End div.col-md-6 group txt-center --> </div><!-- End div.row --> </div><!-- End div.container --> </section><!-- End section#hero --> </main>
from your example: 从你的例子:
#register div:hover .group { opacity: .5; }
#register div .group:hover { opacity: 1; }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.