我在 MVC4 中工作。我对设计端不太熟悉。在我的应用程序中,我的标题如下:
但是在鼠标悬停在用户名上时,我想要这个:
我如何实现这种风格。
HTML:
<div class="header">
<div class="title">
<span style="font-size: 24pt; font-weight: bold; color: White">Company name</span>
<div id="login" class="loginDisplay">
Username
</div>
</div>
</div>
CSS:
.header {
background: url("images/header-bg.jpg") repeat scroll 0 0 #3B5998;
height: 100px;
margin: 0;
padding: 0;
position: relative;
width: 100%;
}
.title {
height: 45%;
padding: 8px;
position: relative;
width: 98%;
}
.loginDisplay {
color: #FFFFFF;
font-size: 1.1em;
position: absolute;
right: 15px;
text-align: right;
top: 15px;
}