Bizon4ik,
|
Сообщение от Bizon4ik
|
|
Разве от того что я буду использовать id или класс поменяется логика кода?
|
да
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo by Bizon4ik</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
body, html {
background:#ddd;
}
.marginfirstscreen {
width:100%;
height:100%;
position:relative;
z-index:1;
}
.marginfirstscreen .mainbutton {
margin:50px 0 50px 150px;
display:inline-block;
width: 200px;
height: 70px;
position: relative;
z-index:5;
float:left;
}
.marginfirstscreen .mainbutton h4 {
display:inline-block;
position:relative;
z-index:10;
color:#000;
text-align:center;
width:100%;
height:100%;
margin:0;
padding:0;
line-height:70px;
font-size:2em;
font-family:sans-serif;
}
.marginfirstscreen .mainbutton svg {
position: absolute;
top: 0;
left: 0;
z-index:0;
}
.marginfirstscreen .mainbutton svg line {
stroke-width: 2;
stroke: #fff;
fill: none;
stroke-dasharray: 200;
-webkit-transition: -webkit-transform .6s ease-out;
transition: transform .6s ease-out;
}
.marginfirstscreen .mainbutton:hover svg line.top-line {
-webkit-transform: translateX(-400px);
transform: translateX(-400px);
}
.marginfirstscreen .mainbutton:hover svg line.bottom-line {
-webkit-transform: translateX(400px);
transform: translateX(400px);
}
.marginfirstscreen .mainbutton:hover svg line.left-line {
-webkit-transform: translateY(400px);
transform: translateY(400px);
}
.marginfirstscreen .mainbutton:hover svg line.right-line {
-webkit-transform: translateY(-400px);
transform: translateY(-400px);
}
#buttom-purchase-info {
position:absolute;
margin-top:-70px;
width:400px;
height:400px;
border:1px solid red;
z-index:9;
display:none;
background:#fff;
}
</style>
<script>
$(window).load(function(){
$(".buttom-purchase").click(function (event) {
$("#buttom-purchase-info").show();
event.stopPropagation()
});
$(document).on("click", function (event) {
if ($(".marginfirstscreen").has(event.target).length === 0) $("#buttom-purchase-info").hide();
});
});
</script>
</head>
<body>
<div class="marginfirstscreen">
<div class="mainbutton" >
<h4 class="buttom-purchase">КУПИТЬ</h4>
<svg width="200" height="70">
<line class="top-line" x1="0" y1="0" x2="600" y2="0" />
<line class="bottom-line" x1="200" y1="70" x2="-400" y2="70" />
<line class="left-line" x1="0" y1="70" x2="0" y2="-400" />
<line class="right-line" x1="200" y1="0" x2="200" y2="470" />
</svg>
<div id="buttom-purchase-info" >
</div>
</div>
<div class="mainbutton" id="secondbuttom" >
<h4 class="buttom-purchase">Продать</h4>
<svg width="200" height="70">
<line class="top-line" x1="0" y1="0" x2="600" y2="0" />
<line class="bottom-line" x1="200" y1="70" x2="-400" y2="70" />
<line class="left-line" x1="0" y1="70" x2="0" y2="-400" />
<line class="right-line" x1="200" y1="0" x2="200" y2="470" />
</svg>
</div>
</div>
</body>
</html>