我有这些块有这些弹出窗口,当盘旋或点击时会升起。但它不会在移动设备上工作。这是我的代码。
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="card"><img src="dirtymudboard_small2.jpg" class="card-img-top w-100 d-block" />
<div class="description text-center">
<br><i class="fa fa-angle-up blink" style="font-size:36px"></i><h4>The Problem</h4>
<h6> Plywood mud boards frequently delaminate. Resulting in fatigue and wear. Throwing the board away would be wasteful, so the mason tears off the flap of wood to prevent it from catching his trowel. Turning the board to change the angle works temporarily. In time the same board will further delaminate. Again resulting in fatigue and wear.</h6>
<form action="why_hmd.html">
<button type="submit">LEARN MORE</button>
</form>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card"><img src="hockey_mud_board_with_mud_small.jpg" class="card-img-top w-100 d-block" />
<div class="description text-center">
<br> <i class="fa fa-angle-up blink" style="font-size:36px"></i><h4>The Solution</h4>
<h6>Hockey Mud Boards are made from the same high density polyethylene as the hockey boards that surround hockey rinks. These boards are solid, empowering masons to approach the mud boards with confidence. Plywood mud boards suck the water out of the mortar, shortening its life. Hockey Mud Boards do not absorb water.</h6>
<form action="why_hmd.html">
<button type="submit">LEARN MORE</button>
</form>
</div>
</div>
</div>
</div>
我的CSS:
div.description:hover {background-color:#88222f;height:100%;overflow:hidden;}
div.description:hover backgroundcolor:#88222f;height:41%; overflow:hidden;}
div.description {transition:height 500ms;position:absolute;bottom:0px;width:100%; height:30%;font-size:16px z-index:99;background-color:#0b214d;color:white;opacity:0.7;overflow:hidden;}