2016-11-09 24 views
1

私のワードプレス内のサイト全体私のマウスカーソルはポインタに変更されていません。 短時間変化した後、デフォルトのカーソルに戻ります。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 // 
 
* { 
 
\t margin:0; 
 
\t padding:0; 
 
} 
 
body { 
 
    width:100%; 
 
    height:auto; 
 
    overflow-x:hidden; 
 
} 
 

 
// Navigation // 
 
.navbar { 
 
    border:0; 
 
    border-radius:0; 
 
    background:$c-white; 
 
} 
 
nav { 
 
\t overflow: hidden; 
 
\t height:80px; 
 
\t 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; 
 
     } 
 
     } 
 
    } 
 

 
    } 
 
}

私は、誰かがこの1で私を助けることができると思いますが...

+0

問題のある要素に関連するCSSとその要素のHTMLも含めてください... – DaniP

+1

ポインタは '.thumbnail'と' .title'にのみ追加されました – Dekel

+0

'cursor:pointer'どこですか?空のページにあるカーソルを確認する必要がありますか? * FYI:あなたのスタイルの最後に '}'がありません。* –

答えて

0

あなたはCSSを結果の確認があります:

は、ここに私のSCSSですか? 私が見ている限り、実際にはポインタカーソルを持つ要素が2つしかありません。 対応するカーソルが設定されている要素から離れるだけで、カーソルが通常に戻ります。

カーソルをポインタに変更する要素を調べましたか?

+0

結果のCSSは正しいですが、ポインタによって強調表示される必要がある要素には正しいCSSがあります。しかし、私はそれの上にマウスを置いた瞬間、それはポインタに変わり、その後直接デフォルトに戻ります。私が要素を調べると、何も特別なことはなく、何の誤りも見られません。 –

+0

クラスの変更など、そのような要素のホバー上でトリガされたJSイベントが存在する可能性がありますか? – DmitryR

+0

私はまだJSを実装していません。 –

関連する問題