ホバーした時にボックス内が透過されてしまうのをどうにかしたいです。

.message {
position: relative;

}
.message span.remark {
display: none;
position:absolute;

}

.message a:hover span.remark {
background: repeat scroll 0 0 #a575f5
;
border: 4px groove #e6e6fa;
color: #778899;
display:;
line-height: 1.2em;
margin: 0.5em;
padding: 0.5em;
position: bottom;
left:200px;
top: 40px;
width: 20em;}

上のCSSを使うとマウスオンでホバーした際にメッセージと背景の文字がかぶってしまうのをどうにかしたいのですがどうすればいいでしょうか？