JS / CSS onmouseover问题 - 闪烁

时间：2017-01-22 10:59:12

标签： javascript jquery html css css3

当有人在3个div容器中的一个上盘旋时，我正试图获得一个很好的转换。我正在使用js更改类，另一方面，类具有Transition或Animation。

您可以在此处查看实时版本：LINK

这是HTML和内联Javascript： 

<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:800" rel="stylesheet">
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="style.css">
<title>Schwarz & Torf Maler AG</title>
</head>
<body>

    <div class="col-12 header_div">
        <h1 class="col-12 header_title">Schwarz & Torf Maler AG</h1>
        <h3 class="col-12 header_subtitle">Wir Malen wo andere nur zuschauen</h3>
    </div>

    <div class="col-2"></div>

    <div class="col-2" id="content_1" onmouseover="mouseOver('content_1', 'content_2', 'content_3')" onmouseout="mouseOut('content_1', 'content_2', 'content_3')">
        <div class="content_area content_col_1 shadowbox_red">
            <div class="content_title">
                <h2>Palette</h2>
            </div>
        </div>
    </div>

    <div class="col-1"></div>

    <div class="col-2" id="content_2" onmouseover="mouseOver('content_2', 'content_1', 'content_3')" onmouseout="mouseOut('content_2', 'content_1', 'content_3')">
        <div class="content_area content_col_2 shadowbox_blue">
            <div class="content_title">
                <h2>Offerte</h2>
            </div>
        </div>
    </div>

    <div class="col-1"></div>

    <div class="col-2" id="content_3" onmouseover="mouseOver('content_3', 'content_1', 'content_2')" onmouseout="mouseOut('content_3', 'content_1', 'content_2')">
        <div class="content_area content_col_3 shadowbox_green">
            <div class="content_title">
                <h2>Vor Ort</h2>
            </div>
        </div>
    </div>

    <div class="col-2"></div>
    <script>
        function mouseOver(content, content_reduce1, content_reduce2) {
            console.log(content + " selected");
            console.log(document.getElementById(content));
            document.getElementById(content).setAttribute("class", "col-5-trans");
            document.getElementById(content_reduce1).setAttribute("class", "col-0");
            document.getElementById(content_reduce2).setAttribute("class", "col-0");
        }
        function mouseOut(content, content_reset1, content_reset2) {
            console.log(content + " deselected");
            setInterval(function(){
                document.getElementById(content).setAttribute("class", "col-2");
                document.getElementById(content_reset1).setAttribute("class", "col-2");
                document.getElementById(content_reset2).setAttribute("class", "col-2");
            },2000);

        }
    </script>

</body>
</html>

以下是CSS文件中的相关部分： 

/*GRID_COLUMNS*/
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

[class*="col-"] {
    float: left;
    padding: 15px;
}

.row::after {
    content: "";
    clear: both;
    display: table;
}

    .col-0 {
    width: 8.33%;

    animation-name: col-0-anim;
    animation-duration: 2s;
    animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-out; /* Safari 4.0 - 8.0 */
    animation-timing-function: ease-out;
}

    @keyframes col-0-anim {
        0% {
            width: 8.33%;
        }
        100% {
            width: 0%;
        }
    }

    .col-5-trans {
        width: 16.66%;
        -webkit-transition: width 2s ease-out; /* Safari */
        transition: width 2s ease-out;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    .col-5-trans:hover {
        width: 41.66%;
    }
/*END GRID_COLUMNS*/

此处为CONTENT Area CSS： 

/*CONTENT AREA*/
.content_area {
    height: 500px;
    background-color: rgba(40, 40, 40, 1);
    border: 2px solid white;
    border-radius: 10px;

    background-image: url("images/background_exp.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
    .content_area .content_title {
        position: relative;
        overflow: visible;
        height: 100%;
        width: 45%;
        float: right;
    }

    .content_area h2 {
        position: absolute;
        bottom: 0;
        right: 0;
        margin: 0;
        padding-left: 20px;
        width: 100px;

        color: rgba(255, 255, 255, .9);
        white-space: nowrap;
        letter-spacing: 1px;
        font-size: 5em;

        -ms-transform: rotate(270deg); /* IE 9 */
        -webkit-transform: rotate(270deg); /* Chrome, Safari, Opera */
        transform: rotate(270deg);
    }

2 个答案:

答案 0 :(得分：2)

现在你正试图模仿Twitter Bootstrap的网格系统的原理，悬停时可变列宽。

你必须选择：

1。 否则-IT-错误™

你不应该在这里使用col-*系统，但作为练习，这是你的JavaScript应该遵循的逻辑，以达到这个效果：

  1. 在开始时使所有列相等（将它们设为col-4）
  2. 使mouseenter上的列更宽，而其他两列更窄（使所有col-3并且只剩下一个col-6）
  3. 在mouseleave（使所有col-4）
    4. 上使所有三列相等
  4. 离开某列并同时输入另一列时，请确保mouseenter在mouseleave之后（在所有设备上）
  5. 使用 A-Nice-Transition™
    6. 为列的width属性设置动画

    除5)之外，您可以使用jQuery的animate()，但动画width可能会在资源有限的设备上产生不良结果，并且无法确保您的过渡始终保持平滑。使用CSS过渡更安全。

    我只列出了上述解决方案的编程逻辑，而不是代码本身，因为我强烈建议反对这种方法。如果你确定要这样，我可以提供它。

    为什么我建议反对呢？因为通过CSS可以实现更清晰的相同结果...

    2。 flexbox救援

    它在浏览器上更快，更轻，并且可以在所有设备上更流畅地呈现。此外，您无需担心JavaScript事件的顺序。

    如果您担心浏览器兼容，它目前位于97.38%（前缀）。它比box-hadow有更好的支持，你似乎使用了很多 这是代码：

    .roW {
  margin:1rem auto;
  /* change to desired height */
  min-height:calc(100vh - 2rem); 
  
  /* don't forget to prefix all CSS at https://autoprefixer.github.io/ */
  display: flex; 
  align-items: stretch;
  justify-content: center;
}
.columN {
  background-color: #999;
  flex: 1 1 auto;
  margin: 1rem;
  max-width: 33%;
  
  /* A-Nice-Transition™ */ 
  transition: flex-grow .5s  cubic-bezier(.4, 0, .2,1), max-width .5s  cubic-bezier(.4, 0, .2,1);
}
.columN:hover {
  
  /* change to make hovered columns wider */
  flex-grow: 2; 
  max-width: 50%;
}
    <div class="roW">
  <div class="columN"></div>
  <div class="columN"></div>
  <div class="columN"></div>
</div>

    注意： max-width似乎没必要，但是当内容的长度不同时，它会保持列的宽度相同（否则它们会自我调整以最适合内容的显示）。

答案 1 :(得分：1)

您不必在此处使用JavaScript。只有CSS的解决方案适用于您的情况：

＆＃13;
＆＃13; 
.container {
  display: flex;
  justify-content: space-between;
}

.col {
  width: 20%;
  height: 200px;
  background: orange;
  transition: all 1s ease-in-out;
}

.col:hover {
  width: 30%;
}
＆＃13; 
<div class="container">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>
＆＃13;
＆＃13;
＆＃13;

我建议你不要使用浮动元素，将cols放在容器中，并使用flexbox将它们完美地并排放置。

保持位置并在悬停时使列不太宽

如果你想保持每个元素的位置悬停，并使列不那么宽，你可以这样做：

＆＃13;
＆＃13; 
.container {
  position: relative;
}

.col {
  display: inline-block;
  width: 20%;
  height: 200px;
  background: orange;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 1s ease-in-out;
}
.col:nth-child(2) {
  left: 50%;
  transform: translate3d(-50%,0,0);
}
.col:last-child {
  top: 0;
  right: 0;
  left: initial; // Reset left
}

.col:hover {
  width: 30%;
}
＆＃13; 
<div class="container">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题