javascript - 如何将 CSS 应用于除悬停元素之外的其他元素？

标签 javascript jquery html css

在网络上你会看到最后一次有很多漂亮的悬停效果，特别是对于投资组合页面，当你将鼠标悬停在一个元素上时，另一个将获得较低的不透明度，所以你悬停的那个被突出显示。

我试图实现这种效果并完成了这个(也是 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>

但这里的问题是，当您的光标已经在某个区域(“注册”文本周围)时，它会降低两个元素的不透明度。那不是我想要的。我想要的是，当您将鼠标悬停在 div .group 上时，它会给另一个较低的不透明度。

我知道您可以使用 jQuery 实现这一点，但我也知道这应该仅使用 CSS 就可以实现。我怎样才能实现我正在寻找的东西？

最佳答案

考虑到您实际达到的程度，解决方案实际上很简单。

以下是我所做的修复:

  • 添加了另一个选择器，当鼠标悬停在具有“Register “文本。
  • 将 hgroup 上的 margin-bottom: 80px 更改为 padding-bottom: 80px 因为 margin 不是元素的一部分，而padding 占用的区域是。因此，即使鼠标位于“注册”按钮下方的空间(但不在 .group 本身内)，hgroup:hover 选择器也会应用。
  • 向 hgroup 添加了 margin-left: 0px 因为 Bootstrap CSS 默认为 hgroup 元素提供了 80px 的左边距，这导致 hgroup:hover 选择器出现问题。

在下面的代码片段中，我还在 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>

关于javascript - 如何将 CSS 应用于除悬停元素之外的其他元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34462401/

上一篇：javascript - Bootstrap Modal 不能在 CodePen 上完全工作

下一篇：javascript - 如何在 css 悬停叠加层上显示很棒的字体图标(如 View )？

相关文章：

循环内的 JavaScript 闭包——简单实用的示例

javascript - 如何在点击其他图像时更改div的图像

javascript - CSS - 无法更改 <filter> 的此属性？

jquery - 在日期选择器中显示预定义日期

html - 如何在使用多个类的单个元素上使用多个 CSS 伪类 **::before**

c# - 如何将 CSS 应用于带母版页的导航栏？

javascript - .map 中 react 单选按钮的条件显示/隐藏

javascript - 切换开关在 IE 中未保持打开状态

javascript - JQuery 点击事件仅在第一次工作

javascript - 单击特定超链接时切换对象的可见性

©2024 IT工具网  联系我们