|
Сообщение от Tass
|
|
в css почти все перепробовала
|
Плохо пробовала...
Как вариант...
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
.button {
width: 400px;
height: 50px;
border: 1px solid;
overflow: hidden;
font-size: 14pt;
cursor: pointer;
}
.b_box {
position: relative;
display: block;
width: 100%;
height: 100%;
text-decoration: none;
background-color: blue;
}
.b_tit {
color: #ffffff;
height: 100%;
width: 50%;
float: left;
text-align: center;
}
.b_tit > span {
position: relative;
top: 15px
}
.arrow {
position: absolute;
top: 20px;
left: 50%;
display: none;
width: 10px;
height: 10px;
background-color: #ffffff;
}
.link {
position: relative;
top: 15px;
display: none;
margin-left: 55%;
color: #ffffff;
}
.b_box:hover > .b_tit {
color: blue;
background-color: #ffffff;
}
.b_box:hover > .arrow {
display: block;
}
.b_box:hover > .link {
display: block;
}
</style>
<script>
</script>
</head>
<body>
<div class='button'>
<a class='b_box' href='#'>
<p class='b_tit'><span>О компании</span></p>
<div class='arrow'></div>
<p class='link'>Link1 Link2</p>
</a>
</div>
</body>
</html>