Question

我试图在悬停时从div的底部移动文本，但是当我悬停文本时，从图块外部可以看到文本，然后移动，我想要的是它看起来像它从瓷砖底部移入。

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/myscript.js"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="tile">
        <div class="front">
        </div>
        <div class="back"></div>    
    </div>
</body>
</html>

CSS：

body{
    background-color: black;
}
.tile{
    background: red;
    margin-left: 400px;
    margin-top: 200px;
    height: 100px;
    width: 200px;
    color: white;
    z-index:-1;
}
.tile:HOVER {
    transform: rotateY(360deg);
    z-index:-1;
}

.back{
    top: 100px;
    position: absolute;
}

Jquery的：

$(document).ready(function(){
    $(".tile").hover(function(){
            $(".front").hide().empty();
            $(".back")
            $(".back").show().append("<h3>Welcome</h3>" +
                "<p>This is th content being changed</p>");
            $(".back").animate({top:'-=100px',opacity:"1"},"slow");
    },function(){
        $(".back").animate( {top:"+=100px",opacity:"0"},"fast").hide().empty();
        $(".front").show().append("<h3>Hello<h3>");
    });
});

Answer 1

.tile {
  background: red;
  margin-left: 400px;
  margin-top: 200px;
  height: 100px;
  width: 200px;
  color: white;
  overflow: hidden; // add this line
  z-index: -1;
}

溢出：隐藏;

如果需要，可以剪裁内容以适合填充框。没有滚动条提供。

表示.tile范围之外的文字将不可见。

See MDN

＆＃13;

$(document).ready(function() {
  $(".tile").hover(function() {
    $(".front").hide().empty();
    $(".back")
    $(".back").show().append("<h3>Welcome</h3>" +
      "<p>This is th content being changed</p>");
    $(".back").animate({
      top: '-=100px',
      opacity: "1"
    }, "slow");
  }, function() {
    $(".back").animate({
      top: "+=100px",
      opacity: "0"
    }, "fast").hide().empty();
    $(".front").show().append("<h3>Hello<h3>");
  });
});

＆＃13;

body {
  background-color: black;
}

.tile {
  background: red;
  margin-left: 400px;
  margin-top: 200px;
  height: 100px;
  width: 200px;
  color: white;
  overflow: hidden;
  z-index: -1;
}

.tile:HOVER {
  transform: rotateY(360deg);
  z-index: -1;
}

.back {
  top: 100px;
  position: absolute;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tile">
  <div class="front">
  </div>
  <div class="back"></div>
</div>

＆＃13;

在div外部移动文本动画

1 个答案: