CSS -- cursor:pointer 被快速覆盖答案

【问题标题】：SCSS -- cursor:pointer getting quickly overwrittenCSS -- cursor:pointer 被快速覆盖
【发布时间】：2017-03-23 08:25:54
【问题描述】：

在我的 WordPress 中，整个网站上我的鼠标光标都没有变成指针。

它确实会改变一秒钟，然后又变回默认光标。

这是我的 SCSS：

// Fonts //

// Caviar Dreams //
  @font-face {
    font-family: 'caviar_dreams';
    src: url('../fonts/caviar_dreams/caviardreams_bold-webfont.woff2') format('woff2'),
    url('../fonts/caviar_dreams/caviardreams_bold-webfont.woff') format('woff');
    font-weight: 500;
    font-style: normal;
  }
  @font-face {
    font-family: 'caviar_dreams';
    src: url('../fonts/caviar_dreams/caviardreams_bolditalic-webfont.woff2') format('woff2'),
    url('../fonts/caviar_dreams/caviardreams_bolditalic-webfont.woff') format('woff');
    font-weight: 600;
    font-style: normal;
  }
  @font-face {
    font-family: 'caviar_dreams';
    src: url('../fonts/caviar_dreams/caviardreams_italic-webfont.woff2') format('woff2'),
    url('../fonts/caviar_dreams/caviardreams_italic-webfont.woff') format('woff');
    font-weight: 300;
    font-style: normal;
  }
  @font-face {
    font-family: 'caviar_dreams';
    src: url('../fonts/caviar_dreams/caviardreams-webfont.woff2') format('woff2'),
    url('../fonts/caviar_dreams/caviardreams-webfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;
  }

// Thinking Of Betty //
  @font-face {
    font-family: 'thinking_of_betty';
    src: url('../fonts/thinking_of_betty/thinking_of_betty-webfont.woff2') format('woff2'),
    url('../fonts/thinking_of_betty/thinking_of_betty-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
  }

// Square Deal //
  @font-face {
    font-family: 'square_deal';
    src: url('../fonts/square_deal/square-deal-webfont.woff2') format('woff2'),
    url('../fonts/square_deal/square-deal-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
  }

// Barkentina //
  @font-face {
    font-family: 'barkentina';
    src: url('../fonts/barkentina/barkentina_1-webfont.woff2') format('woff2'),
    url('../fonts/barkentina/barkentina_1-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
  }

// Colors //

$c-black: #111;
$c-white: #fff;
$c-dark-brown: #b29256;
$c-light-brown: #ffd994;
$c-blue: #adfff3;
$c-light-purple: #a462cc;
$c-dark-purple: #935fb2;

// Transitions //

$transition: all ease-in-out .2s;

// Main Style //
* {
    margin:0;
    padding:0;
}
body {
  width:100%;
  height:auto;
  overflow-x:hidden;
}

// Navigation //
.navbar {
  border:0;
  border-radius:0;
  background:$c-white;
}
nav {
    overflow: hidden;
    height:80px;
    width:100%;
    z-index: 900;
    -webkit-box-shadow: 0px 8px 35px 0px rgba(0,0,0,0.22);
    ul {
      border:0;
      li {
        .menu-primary-container {
          width:100%;
          height:100%;
          background:green;
          position: absolute;
          ul {
            display:block;
            width:102%;
            margin-left:-1%;
            list-style:none;
            border:0;
            li {
              float:left;
              width:25%;
              text-align:center;
              z-index:500;
              a {
                text-decoration:none;
                text-transform:uppercase;
                color:$c-black;
                width:100%;
                padding: 4% 0;
                font-size:2em;
                font-family:caviar_dreams;
                font-weight:400;
                transition:$transition;
                display:block;
                z-index:1000;
                  &:hover {
                  color:$c-black;
                  font-size:2.2em;
                  background:$c-light-brown;
                }
              }
            }
          }
        }
      }
    }
  }

// Header //

.header {
  .overlay {
    width: 100%;
    height: 100vh;
    background: -moz-linear-gradient(-45deg,  $c-light-purple 0%, $c-blue 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg,  $c-light-purple 0%, $c-blue 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg,  $c-light-purple 0%, $c-blue 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a462cc', endColorstr='#adfff3',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    opacity:0.7;
    position:absolute;
    left:0;
    top:0;
    z-index:10;
    -webkit-box-shadow: 0 8px 35px 0 rgba(0,0,0,0.35);
  }
  .slider {
    height:93vh;
    width:100%;
    margin-top:-1.2%;
    overflow:hidden;
    z-index:5;
    .ls-slide {
      height: 100vh !important;
      img {
        height:100vh !important;
        width:auto !important;
        margin-top:0 !important;
        margin-left:-35% !important;
      }
    }
  }
  .me {
    position: absolute;
    top:-85vh;
    left:50%;
    transform:translateX(-50%);
    z-index:15;
    img {
      height:560px;
      border-radius:100%;
      -webkit-box-shadow: 0 0 35px 0 rgba(0,0,0,0.22);
    }
  }
  .title {
    position: absolute;
    top:-25vh;
    width:100%;
    text-align:center;
    font-family:thinking_of_betty;
    font-size:7.5em;
    color:$c-white;
    z-index:15;
  }
}

// Main Content //

// Spacer //

.spacer {
  width:100%;
  height:30vh;
  background:$c-white;
  img {
    display:block;
    height:200px;
    margin-top:50px;
    position: absolute;
    left:50%;
    transform:translateX(-50%);
  }
}

// Who Am I //

.whoami {
  height:100vh;
  width:100%;
  -webkit-box-shadow: 0 -8px 35px 0 rgba(0,0,0,0.35);
  .whoamibg{
    width:100%;
    height:100%;
    background-size:cover;
    position: absolute;
  }

  .overlay{
    width:100%;
    height:100%;
    position: absolute;
    background: -moz-linear-gradient(-45deg,  $c-light-purple 0%, $c-light-brown 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg,  $c-light-purple 0%, $c-light-brown 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg,  $c-light-purple 0%, $c-light-brown 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a462cc', endColorstr='#FFD994',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    opacity:0.7;
    -webkit-box-shadow: 0 8px 35px 0 rgba(0,0,0,0.35);
  }

  .title {
    position: absolute;
    width:100%;
    text-align:center;
    color:$c-white;
    font-family:thinking_of_betty;
    font-size:4em;
    margin-top:75px;
  }

  .me2 {
    img {
      height:400px;
      margin-top:100px;
      margin-left:100px;
    }
    .skills {
      background:$c-dark-purple;
      height: 40vh;
      width:314px;
      margin-left: 123px;
      margin-top: -2px;
      overflow:hidden;
      transition:$transition;
      .skill-text {
        color:white;
        font-family:caviar_dreams;
        font-size: 2.5em;
        float:none;
        width:100%;
        text-align:center;
        display:block;
        padding-top:36px;
      }
      .percent-text {
        color:white;
        font-family:caviar_dreams;
        font-size:1em;
        display:block;
        margin-top:16px;
        position:relative;
        left:-4%;
      }
      .skill-percent {
        transition:$transition;
        width:50%;
        background:$c-white;
        height:10px;
        position:absolute;
        margin-left:5%;
        margin-top:8px;
        .skillbar {
          position: absolute;
          height:100%;
          background:$c-blue;
        }
      }
    }
  }
  .story {
    color: white;
    margin-top: 260px;
    font-family: barkentina;
    font-size: 2.6em;
    text-align: center;
    width: 85%;
  }
}

// My Work //

.mywork {
  width:100%;
  height:100vh;
  background: -moz-linear-gradient(45deg,  $c-blue 0%, $c-light-brown 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(45deg,  $c-blue 0%, $c-light-brown 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(45deg,  $c-blue 0%, $c-light-brown 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ADFFF3', endColorstr='#FFD994',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

  .title {
    position: absolute;
    width:100%;
    text-align:center;
    color:$c-white;
    font-family:thinking_of_betty;
    font-size:4em;
    margin-top:75px;
    cursor:pointer;
  }
  .container {
    width:1900px;
    margin-top:300px;

    .thumbnail {
      padding:6px;
      background: -moz-linear-gradient(45deg,  $c-blue 0%, $c-light-brown 100%);
      background: -webkit-linear-gradient(45deg,  $c-blue 0%, $c-light-brown 100%);
      background: linear-gradient(45deg,  $c-blue 0%, $c-light-brown 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ADFFF3', endColorstr='#FFD994',GradientType=1 );
      -webkit-box-shadow: 0 0 35px 0 rgba(0,0,0,0.22);
      overflow:hidden;
      width: 100%;
      height: 306px;
      cursor:pointer;
      img {
        z-index:2;
      }
      .overlay {
        position: relative;
        z-index: 5;
        top: -100.6%;
        padding: 6px;
        background: rgba(255, 255, 255, 0.5);
        color: #fff;
        height: 100.5%;
        opacity:0;
        -webkit-transition: $transition;
        -moz-transition: $transition;
        -ms-transition: $transition;
        -o-transition: $transition;
        transition: $transition;
        &:hover {opacity:1;}
        .overlay_title {
          font-family:caviar_dreams;
          font-weight:500;
        }
        .stripe {
          background:$c-white;
          width:20px;
          height:2px;
        }
        .description {
          font-family:barkentina;
        }
      }
    }

  }
}

我希望有人能帮我解决这个问题..

【问题讨论】：

请仅包含您遇到问题的元素的相关 CSS 以及该元素的 HTML ...
你只添加了指向.thumbnail和.title的指针
cursor:pointer 在哪里？我们应该检查空白页面上的光标吗？ 仅供参考：您的样式末尾缺少}。
@Danip 我包含了整个 SCSS，因为我不确定我是否在整个文档中遗漏了一些会取消指针事件的内容。
@Dekel 这是正确的 .title 因为我想检查它是否与 .thumbnail 有关。

标签： css wordpress sass mouse-cursor

【解决方案1】：

您检查过生成的 CSS 吗？据我所知，实际上只有几个元素会有指针光标。我相信光标会恢复正常只是因为它离开了具有相应光标集的元素。

您是否检查过将光标变为指针的元素？

【讨论】：

生成的css是正确的，需要被指针“高亮”的元素确实有正确的css。但是当我将鼠标悬停在它上面的那一刻，它会变成指针，然后直接回到默认值。当我检查元素时，我没有什么特别的，也看不到任何错误。
这些元素悬停时会不会触发任何JS事件，改变类等等？
我还没有实现JS。
如果你的意思是这个jsfiddle.net/5dexLcty 那么，是的。除此之外，我正在离线构建它，直到我可以测试它的响应能力等并完成它。
谢谢。有趣 - 当我将鼠标悬停在 .thumbnail 元素时，Chrome 光标会正确更改为指针。