Эффект наведения курсора мыши на элемент li некорректно работает в Google Chrome

ProgramBox

Эффект наведения курсора мыши на элемент li некорректно работает в Google Chrome

Post author:admin
Запись опубликована:2 марта, 2023
Post category:Вопросы по программированию

#html #css

#HTML #css

Вопрос:

Привет, у меня проблема в том, что мой эффект наведения не работает должным образом в Google Chrome. Смотрите GIF: https://giphy.com/gifs/GsUXBgcokM96zmlQkj. Это работает в Firefox. Может кто-нибудь помочь мне запустить его в Chrome? Я думаю, что проблема заключается в моем CSS #flat (js здесь не важен).

CodePen: https://codepen.io/NesR0M/pen/KKMzvjO .

 var clicked = true;

function flattoZero(){
    document.getElementById("flat").style.top = "0%";
    document.getElementById("flat").style.left = "0%";
}

function flattotheRight(){
    document.getElementById("flat").style.top = "1%";
    document.getElementById("flat").style.left = "1%";
}

function flattotheLeft(){
    document.getElementById("flat").style.top = "1%";
    document.getElementById("flat").style.left = "-1%";
}




function burgerclick() {
    const card = document.getElementById("flipable");
    card.classList.toggle("flip-card-inner-active");

    flattoZero();
    setTimeout(function(){ flattotheLeft(); }, 500);
    clicked = false;
}

function clickback() {
    const card = document.getElementById("flipable");
    card.classList.toggle("flip-card-inner-active");

    flattoZero();
    setTimeout(function(){ flattotheRight(); }, 500);
    clicked = true;
}





function mouseOver() {
    if(clicked){
    flattoZero();
    }
}
  
function mouseOut() {
    if(clicked){
        flattotheRight();
    }
}

function mouseOverflipped() {
    if(!clicked){
    flattoZero();
    }
}
  
function mouseOutflipped() {
    if(!clicked){
    flattotheLeft();
    }
}

 :root {

        /*
    --font-color: rgb(255, 238, 232);
    --flat-color: rgb(255, 114, 67);
    --main-background-color:rgb(255, 213, 197);
    */

    /*
    --font-colorF: rgb(255, 255, 255);
    --flat-colorF: rgb(255, 242, 67);
    --main-background-colorF:rgb(42, 42, 44);
    */


    --font-colorF: rgb(255, 255, 255);
    --flat-colorF: rgb(67, 170, 255);
    --main-background-colorF:rgb(42, 42, 44);
    
    --font-color: rgb(255, 255, 255);
    --font-hover-color: white;
    --font-underline-color: white;
    --nav-font-color: rgb(65, 65, 65);
    --burger-color: var(--font-color);
    --shadow-color: rgba(58, 58, 58, 0.2);
    --main-background-color: rgb(175, 175, 175);
    
}
body{   
/*Futura PT Light*/
font-family: futura-pt, sans-serif;
font-weight: 600;
font-style: italic;

color: var(--font-colorF);
background-color: var(--main-background-colorF);

width: 100%;
height: 100vh;
margin: 0px;
display: flex;
align-items: center;
justify-content: center;

transition: all 400ms ease-out;
 
}


#desktop{
    height: 100%;
    width: auto;
}

.leftcenter {
    position: absolute;
    font-size: 12vmin;
    top: 50%;
    left: 29%;
    transform: translate(-50%, -50%);
    transition: 0.30s;
}

.rightcenter {
    position: absolute;
    font-size: 12vmin;
    top: 50%;
    left: 75%;
    transform: translate(-50%, -50%);
    transition: 0.30s;
}

.burger{
    position: absolute;
    top: 5%;
    left: 2.5%;
    cursor: pointer;
}

.burger div{
    height: 4px;
    background-color: var(--burger-color);
    margin: 5px;
    border-radius: 50px;
    transition: 0.3s;
}

.line1{
    width: 36px;
}

.line2{
    width: 24px;
}

.line3{
    width: 30px;
}

.burger:hover div{
    width: 36px;
}

.nav{
    list-style-type:none;
    font-size: 6vmin;
    font-weight: 500;
}


.flip-card {
    perspective: 10000px;  
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;
}
  
.flip-card-inner {
    position: relative;
    height: 80%;
    width: 90%;
    max-width: 162vh;
    transition-timing-function: ease;
    transition-duration: 0.5s;
    transform-style: preserve-3d;
}
.flip-card-inner-active {
    transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
    background-color: black;
    position: absolute;
    height: 100%;
    width: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
    overflow: hidden;
    box-shadow: none;
}

.flip-card-front {
    display: flex;
    align-items: center;
    justify-content: center;
    
}
  
.flip-card-back {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--font-color);
    transform: rotateY(180deg);
}



ul {
    display: flex;
    flex-direction: column;
    list-style-type: none;
    align-items: start;
    justify-content: space-between;
}


ul li {
    padding: 6px 0;
}

ul li p {
    cursor: pointer;
    position: relative;
    display: block;
    padding: 4px 0;
    font-weight: 500;
    font-size: 4vh;
    color: var(--nav-font-color);
    text-decoration: none;
    text-transform: uppercase;
    transition: 0.5s;

    
    font-family: 'Raleway', sans-serif;
    font-size: 4vh;
    text-transform: lowercase;
}

ul li p::after {
    position: absolute;
    content: "";
    top: 100%;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--font-underline-color);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.5s;
}

ul li p:hover {
    color: var(--font-hover-color);
}

ul li p:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

#flat{
        position: absolute;
        height: 100%;
        width: 100%;  
        top: 1%;
        left: 1%;
        background-color: var(--flat-colorF);
        z-index: -5;
        transition: 0.3s;
    }

@media screen and (max-width: 100vh){
    .leftcenter {
        font-size: 6vmin;
        top: 8.2%;
        left: 62%;
    }
    .rightcenter{
        font-size: 6vmin;
        top: 8.2%;
        left: 85%;
    }
}

 <div class="flip-card">
  <div class="flip-card-inner" id="flipable">
    <div class="flip-card-front">
      <img id="desktop" src="img/_1080374.jpg" alt="Picture">
      <div class="leftcenter">NAME</div>
      <div class="rightcenter">NAME</div>
      <div class="burger" onclick="burgerclick()" onmouseover="mouseOver()" onmouseout="mouseOut()">
          <div class="line1"></div>
          <div class="line2"></div>
          <div class="line3"></div>
      </div>
    </div>
    <div class="flip-card-back">
      <ul>
        <li><p id="home" onclick="clickback()" onmouseover="mouseOverflipped()" onmouseout="mouseOutflipped()">BACK</p></li>
        <li><p>ABOUT ME</p></li>
        <li><p>PROJECTS</p></li>
        <li><p>CONTACT</p></li>
      </ul>
    </div>
    <div id="flat"></div>
  </div>
</div>

<script src="js/script.js"></script>

Ответ №1:

Похоже, что передняя часть карты оказывается перед задней частью карты даже после поворота, только в левой части (вот почему вы можете навести курсор на правую часть). Быстрое решение — добавить небольшое пространство между обеими гранями с translate3d(0, 0, 1px) .flip-card-back помощью элемента in:

 var clicked = true;

function flattoZero(){
    document.getElementById("flat").style.top = "0%";
    document.getElementById("flat").style.left = "0%";
}

function flattotheRight(){
    document.getElementById("flat").style.top = "1%";
    document.getElementById("flat").style.left = "1%";
}

function flattotheLeft(){
    document.getElementById("flat").style.top = "1%";
    document.getElementById("flat").style.left = "-1%";
}




function burgerclick() {
    const card = document.getElementById("flipable");
    card.classList.toggle("flip-card-inner-active");

    flattoZero();
    setTimeout(function(){ flattotheLeft(); }, 500);
    clicked = false;
}

function clickback() {
    const card = document.getElementById("flipable");
    card.classList.toggle("flip-card-inner-active");

    flattoZero();
    setTimeout(function(){ flattotheRight(); }, 500);
    clicked = true;
}





function mouseOver() {
    if(clicked){
    flattoZero();
    }
}
  
function mouseOut() {
    if(clicked){
        flattotheRight();
    }
}

function mouseOverflipped() {
    if(!clicked){
    flattoZero();
    }
}
  
function mouseOutflipped() {
    if(!clicked){
    flattotheLeft();
    }
}

 :root {

        /*
    --font-color: rgb(255, 238, 232);
    --flat-color: rgb(255, 114, 67);
    --main-background-color:rgb(255, 213, 197);
    */

    /*
    --font-colorF: rgb(255, 255, 255);
    --flat-colorF: rgb(255, 242, 67);
    --main-background-colorF:rgb(42, 42, 44);
    */


    --font-colorF: rgb(255, 255, 255);
    --flat-colorF: rgb(67, 170, 255);
    --main-background-colorF:rgb(42, 42, 44);
    
    --font-color: rgb(255, 255, 255);
    --font-hover-color: white;
    --font-underline-color: white;
    --nav-font-color: rgb(65, 65, 65);
    --burger-color: var(--font-color);
    --shadow-color: rgba(58, 58, 58, 0.2);
    --main-background-color: rgb(175, 175, 175);
    
}
body{   
/*Futura PT Light*/
font-family: futura-pt, sans-serif;
font-weight: 600;
font-style: italic;

color: var(--font-colorF);
background-color: var(--main-background-colorF);

width: 100%;
height: 100vh;
margin: 0px;
display: flex;
align-items: center;
justify-content: center;

transition: all 400ms ease-out;
 
}


#desktop{
    height: 100%;
    width: auto;
}

.leftcenter {
    position: absolute;
    font-size: 12vmin;
    top: 50%;
    left: 29%;
    transform: translate(-50%, -50%);
    transition: 0.30s;
}

.rightcenter {
    position: absolute;
    font-size: 12vmin;
    top: 50%;
    left: 75%;
    transform: translate(-50%, -50%);
    transition: 0.30s;
}

.burger{
    position: absolute;
    top: 5%;
    left: 2.5%;
    cursor: pointer;
}

.burger div{
    height: 4px;
    background-color: var(--burger-color);
    margin: 5px;
    border-radius: 50px;
    transition: 0.3s;
}

.line1{
    width: 36px;
}

.line2{
    width: 24px;
}

.line3{
    width: 30px;
}

.burger:hover div{
    width: 36px;
}

.nav{
    list-style-type:none;
    font-size: 6vmin;
    font-weight: 500;
}


.flip-card {
    perspective: 10000px;  
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;
}
  
.flip-card-inner {
    position: relative;
    height: 80%;
    width: 90%;
    max-width: 162vh;
    transition-timing-function: ease;
    transition-duration: 0.5s;
    transform-style: preserve-3d;
}
.flip-card-inner-active {
    transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
    background-color: black;
    position: absolute;
    height: 100%;
    width: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
    overflow: hidden;
    box-shadow: none;
}

.flip-card-front {
    display: flex;
    align-items: center;
    justify-content: center;
    
}
  
.flip-card-back {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--font-color);
    transform: rotateY(180deg) translate3d(0, 0, 1px);
}



ul {
    display: flex;
    flex-direction: column;
    list-style-type: none;
    align-items: start;
    justify-content: space-between;
}


ul li {
    padding: 6px 0;
}

ul li p {
    cursor: pointer;
    position: relative;
    display: block;
    padding: 4px 0;
    font-weight: 500;
    font-size: 4vh;
    color: var(--nav-font-color);
    text-decoration: none;
    text-transform: uppercase;
    transition: 0.5s;

    
    font-family: 'Raleway', sans-serif;
    font-size: 4vh;
    text-transform: lowercase;
}

ul li p::after {
    position: absolute;
    content: "";
    top: 100%;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--font-underline-color);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.5s;
}

ul li p:hover {
    color: var(--font-hover-color);
}

ul li p:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

#flat{
        position: absolute;
        height: 100%;
        width: 100%;  
        top: 1%;
        left: 1%;
        background-color: var(--flat-colorF);
        z-index: -5;
        transition: 0.3s;
    }

@media screen and (max-width: 100vh){
    .leftcenter {
        font-size: 6vmin;
        top: 8.2%;
        left: 62%;
    }
    .rightcenter{
        font-size: 6vmin;
        top: 8.2%;
        left: 85%;
    }
}

 <div class="flip-card">
  <div class="flip-card-inner" id="flipable">
    <div class="flip-card-front">
      <img id="desktop" src="img/_1080374.jpg" alt="Picture">
      <div class="leftcenter">NAME</div>
      <div class="rightcenter">NAME</div>
      <div class="burger" onclick="burgerclick()" onmouseover="mouseOver()" onmouseout="mouseOut()">
          <div class="line1"></div>
          <div class="line2"></div>
          <div class="line3"></div>
      </div>
    </div>
    <div class="flip-card-back">
      <ul>
        <li><p id="home" onclick="clickback()" onmouseover="mouseOverflipped()" onmouseout="mouseOutflipped()">BACK</p></li>
        <li><p>ABOUT ME</p></li>
        <li><p>PROJECTS</p></li>
        <li><p>CONTACT</p></li>
      </ul>
    </div>
    <div id="flat"></div>
  </div>
</div>

<script src="js/script.js"></script>

Вопрос:

Ответ №1:

Вам также может понравиться

ECK — как удалить набор узлов?

Как исправить две строки разной длины с помощью SEEDUbuntu

Отправка электронной почты со значениями столбцов до и после изменения с помощью workflow