Question

我有一个CTA，当你将鼠标悬停在它上面时会滑出来。我遇到的问题是文本有时难以阅读，具体取决于背景颜色。我已经创建了一个我想要实现的演示，你可以在这里查看：

这个演示的精髓是： HTML：

<div class="at-about-fab">
  <div class="at-about-fab__thumbnail">
    <img alt="Fiat Professional" src="https://fiatprofessionaleastlondon.co.za/wp-content/uploads/2018/02/CallUs.png" />
  </div>
  <div class="at-about-fab__meta">
    <h2>Call Us Now</h2>
    <p><a href="te:555-555-5555">555 555 5555</a></p>
  </div>
</div>

CSS看起来像这样：

.at-about-fab {
  z-index: 999999;
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: flex;
  align-items: center;
  flex-direction: row;
  transform: translateX(100%);
  transition: 0.2s ease;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  &:before {
    content: "";
    position: absolute;
    display: block;
    top: 50%;
    left: -58px;
    width: 58px;
    height: 48px;
    transform: translateY(-50%);
  }

  &:hover {
    transform: translateX(0%);

    .at-about-fab__meta {
      opacity: 1;
    }
  }

  &__thumbnail {
    position: absolute;
    top: 50%;
    left: -58px;
    background: #FFFFFF;
    width: 48px;
    height: 48px;
    border: 1px solid #EEEEEE;
    border-radius: 100%;
    padding: 4px;
    box-sizing: border-box;
    transform: translateY(-50%);
    overflow: hidden;
    cursor: pointer;

    img {
      display: block;
      width: 100%;
      border-radius: 100%;
    }
  }

  &__meta {
    font-family: 'Open Sans', sans-serif;
    opacity: 0;
    transition: 0.2s ease;

    h2,
    p {
      margin: 0;
      padding: 0;
    }

    h2 {
      color: #444444;
      font-size: 14px;
      font-weight: 600;
    }

    p {
      color: #CCCCCC;
      font-size: 12px;
      font-weight: 400;
    }

    a {
      color: inherit;
      font-weight: 400;
      text-decoration: none;
    }
  }
}

有关如何做到这一点的任何建议？我已经查看了一些基于JavaScript的示例，但我的JavaScript技能还没有......

非常感谢

Answer 1

不建议共享可能被删除的异地链接，但这是一个好的开始。 7 Practical Tips for Cheating at Design

对CSS的评论已经完成了总结。

.at-about-fab {
  z-index: 999999;
  position: fixed;
  /*Dropped the right to hide the text block a little more - you can ignore*/
  right: 0px;
  bottom: 20px;
  /*Add a background that best blends. White is not a bad option as allows many with eye issues read the text behind. Add a little padding*/
  background-color: white;
  padding: 5px 20px;
  display: flex;
  align-items: center;
  flex-direction: row;
  transform: translateX(100%);
  transition: 0.2s ease;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;


  &:before {
    content: "";
    position: absolute;
    display: block;
    top: 50%;
    left: -58px;
    width: 58px;
    height: 48px;
    transform: translateY(-50%);
  }

  &:hover {
    transform: translateX(0%);

    .at-about-fab__meta {
      opacity: 1;
    }
  }

  &__thumbnail {
    position: absolute;
    top: 50%;
    left: -58px;
    background: #FFFFFF;
    width: 48px;
    height: 48px;
    border: 1px solid #EEEEEE;
    border-radius: 100%;
    padding: 4px;
    box-sizing: border-box;
    transform: translateY(-50%);
    overflow: hidden;
    cursor: pointer;

    img {
      display: block;
      width: 100%;
      border-radius: 100%;
    }
  }

  &__meta {
    font-family: 'Open Sans', sans-serif;
    opacity: 0;
    transition: 0.2s ease;

    h2,
    p {
      margin: 0;
      padding: 0;
    }

    h2 {
      color: #444444;
      font-size: 14px;
      font-weight: 600;
    }

    p {
      /*It is advisable not to go so off color. So lighter grey of the #444 you used is a better option so I went for #999 */
      color: #999;
      font-size: 12px;
      font-weight: 400;
    }

    a {
      color: inherit;
      font-weight: 400;
      text-decoration: none;
    }
  }
}

/* Just for the sake of testing */
.content{
    position:relative;
}


#wrapper
{
    position:relative;
}

.section
{
    width: 100%;
    text-align:center;
    padding:250px 0;
    border:1px solid #666;
}

#section1
{
    background: #fff;
}

#section2
{
    background: #000;
    color:#fff;
}

#section3
{
    background: #444444;
}

#section4
{
    background: #BA2322;
}

Codepen Demo

Answer 2

您可以在mix-blend-mode: exclusion;属性和data选择器的帮助下使用::after：

.at-about-fab {
  z-index: 999999;
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  -webkit-transition: 0.2s ease;
  transition: 0.2s ease;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.at-about-fab:before {
  content: "";
  position: absolute;
  display: block;
  top: 50%;
  left: -58px;
  width: 58px;
  height: 48px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.at-about-fab:hover {
  -webkit-transform: translateX(0%);
          transform: translateX(0%);
}
.at-about-fab:hover .at-about-fab__meta {
  opacity: 1;
}
.at-about-fab__thumbnail {
  position: absolute;
  top: 50%;
  left: -58px;
  background: #FFFFFF;
  width: 48px;
  height: 48px;
  border: 1px solid #EEEEEE;
  border-radius: 100%;
  padding: 4px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  overflow: hidden;
  cursor: pointer;
}
.at-about-fab__thumbnail img {
  display: block;
  width: 100%;
  border-radius: 100%;
}
.at-about-fab__meta {
  font-family: 'Open Sans', sans-serif;
  opacity: 0;
  -webkit-transition: 0.2s ease;
  transition: 0.2s ease;
}
.at-about-fab__meta h2,
.at-about-fab__meta p {
  margin: 0;
  padding: 0;
}
.at-about-fab__meta h2 {
  color: #444444;
  font-size: 14px;
  font-weight: 600;
}
.at-about-fab__meta p {
  color: #CCCCCC;
  font-size: 12px;
  font-weight: 400;
}
.at-about-fab__meta a {
  color: inherit;
  font-weight: 400;
  text-decoration: none;
}

/* Just for the sake of testing */
.content {
  position: relative;
}

#wrapper {
  position: relative;
}

.section {
  width: 100%;
  text-align: center;
  padding: 250px 0;
  border: 1px solid #666;
  position: relative;
  color: black;
}
.section:after {
  content: attr(data-content);
  position: absolute;
  width: 100%;
  height: auto;
  text-align: center;
  top: 50%;
  left: 0;
  mix-blend-mode: exclusion;
  color: white;
}

#section1 {
  background: #fff;
}

#section2 {
  background: #000;
}

#section3 {
  background: #444444;
}

#section4 {
  background: #BA2322;
}

<!-- Credits -->
<!-- Developer - Andy Tran (https://andytran.me) -->
<!-- Design - Andy Tran (https://andytran.me) -->
<div class="at-about-fab">
  <div class="at-about-fab__thumbnail">
    <img alt="Fiat Professional" src="https://fiatprofessionaleastlondon.co.za/wp-content/uploads/2018/02/CallUs.png" />
  </div>
  <div class="at-about-fab__meta">
    <h2>Call Us Now</h2>
    <p><a href="te:555-555-5555">555 555 5555</a></p>
  </div>
</div>

<!-- Just for the sake of testing -->
<div class="content">
  <div id="wrapper">
      <div class="section" id="section1" data-content="section1"></div>
      <div class="section" id="section2" data-content="section2"></div>
      <div class="section" id="section3" data-content="section3"></div>
      <div class="section" id="section4" data-content="section4"></div>
  </div>
</div>

这里还有updated codepen with SCSS的链接。

Answer 3

您可以尝试这样的事情：

观

在主容器上添加mouseover事件。
在此处理程序中，有一个包含要添加的类名的变量。
悬停时：
- 获取所有部分。
- 使用图标绑定检查当前部分的范围。
- 如果图标的顶部大于部分的顶部，请更新className变量
- 如果没有，请打破循环。
- 现在删除所有类，将className添加到容器中。您还必须在CSS中编写相应的类。

示例：Updated CodePen

var iconContainer = document.querySelector('.at-about-fab');

iconContainer.addEventListener('mouseover', function () {
  var bounds = this.getBoundingClientRect();
  var sections = document.querySelectorAll('.section');
  var className = '';
  Array.from(sections).some(function(el) {
    var currentBounds = el.getBoundingClientRect();
    if(bounds.top > currentBounds.top) {
      className = el.getAttribute('id');
    }
    else {
      return true;
    }
  });
  this.classList.remove('section1', 'section2', 'section3', 'section4');
  this.classList.add(className);
})

根据背景更改文本颜色

3 个答案:

观