Question

当使用“card1”悬停在div id上时，如何使用“front”向上滑动div id 当鼠标指针不在该div上时，带有“front”的div id应该向下滑动。请有CSS参考

   <html>
    <head>
    <style>
.cards{
    position:relative;

}
#front{
    position:absolute;  
    left:50px;
    z-index:2;
    background-color:red;
    color:white;
    height:200px;
    width:200px;
    border-radius:5px;
}
#back{
    position:absolute;
    left:50px;
    z-index:1;
    height:200px;
    width:200px;
    background-color:blue;
    color:white;
    border-radius:5px;
}
</style>
   </head>
    <body>
    <div class="cards" id="card1">
                <div id="front">
                    <div class="caption" style="text-align:center;">
                        <h6><b>Hello</b></h6>
                    </div>
                </div>
                <div id="back">
                        <div id="buttons">
                            <button class="btn btn-primary lis" data-toggle="modal" data-target="#hello">Description</button>
                            <button class="btn btn-primary lis" data-toggle="modal" data-target="#heelo1">show message</button>
                            <button class="btn btn-primary lis">show message</button>                               
                        </div>
                        <div id="buttons">
                            <img id="imagesLg" src="thiser.gif" alt="HelloWorld"/>
                        </div>
                </div>
        </div>
    </body>
    </html>

提前致谢。

Answer 1

您可以使用javascript实现这一目标。

在'＃card1'上放置两个事件监听器。

第一个mousein，在mousein上提升'#front'分区（你可以使用margin-top：-100px或其他任何东西），
使用mouseout，在mouseout上将'#front'分区放在原来的位置（margin-top：0px）

var chai = require('chai');
var chaiHttp = require('chai-http');
var should = chai.should();
var expect = require("chai").expect;
var testData = require('./testData');
var apiUrl = require('./apiUrl');

chai.use(chaiHttp);


var Mongoose = require('mongoose').Mongoose,
      mongoose = new Mongoose,
      Mockgoose = require('mockgoose').Mockgoose,
      mockgoose = new Mockgoose(mongoose);

var server = require('../../../app');
var productFamily = require('../../../api/models/referenceData/productFamilyModel');
var productType = require('../../../api/models/referenceData/productTypeModel');
var product = require('../../../api/models/product/productModel');
var delivery = require('../../../api/models/delivery/deliveryModel');
var deliveryId;
var prod_common_cases = require("../common/product-common-cases");
var country_state_district_cases = require("../common/country-state-district-common-cases");
var delivery_common_cases=require("../common/delivery-common-cases");
describe('Delivery API', function () {
      before(function (done) {
            mockgoose.helper.reset().then(function () {
                  done();
            });
      });
      //Test1
      it("isMocked", function (done) {
            expect(mockgoose.helper.isMocked()).to.be.true;
            done();
      });

           it("should create productFamily", function (done) {
            prod_common_cases.create_prod_family(done);
            });

我已经使用jquery完成了它（没有任何动画和东西的基本实现）。

如果您不清楚，请发表评论。

由于

Answer 2

我希望我的回答能帮到你！

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <style>
        .cards {
            position: relative;
        }

        #front {
            position: absolute;
            left: 50px;
            z-index: 2;
            background-color: red;
            color: white;
            height: 200px;
            width: 200px;
            border-radius: 5px;
        }

        #back {
            position: absolute;
            left: 50px;
            z-index: 1;
            height: 200px;
            width: 200px;
            background-color: blue;
            color: white;
            border-radius: 5px;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script type="text/javascript">
        $(document).ready(function () {
            $('div[id="card1"]').on('mouseover', function () {
                $('div[id="front"]').slideUp();
            });

            $('div[id="card1"]').on('mouseleave', function () {
                $('div[id="front"]').slideDown();
            });
        });
    </script>
    <title></title>
</head>
<body>
    <div class="cards" id="card1">
        <div id="front">
            <div class="caption" style="text-align:center;">
                <h6><b>Hello</b></h6>
            </div>
        </div>
        <div id="back">
            <div id="buttons">
                <button class="btn btn-primary lis" data-toggle="modal" data-target="#hello">Description</button>
                <button class="btn btn-primary lis" data-toggle="modal" data-target="#heelo1">show message</button>
                <button class="btn btn-primary lis">show message</button>
            </div>
            <div id="buttons">
                <img id="imagesLg" src="thiser.gif" alt="HelloWorld" />
            </div>
        </div>
    </div>
</body>
</html>

向上滑动div元素内的div元素

2 个答案: