There is a method :
event.srcElement
it can return the element that trigger the event. So we can get the element info by event.srcElement.
HTML :
<html>
<head>Get event element</head>
<body>
<div id="container">
<div id="divsteps" style="float:left; width:300px;background-color:green" >
<div id="step1" class="steps" style="height:50px" οnmοuseοver="showDetail()" οnmοuseοut="hideDetail()">Step 1</div>
<div id="step2" class="steps" style="height:50px" οnmοuseοver="showDetail()" οnmοuseοut="hideDetail()">Step 2</div>
<div id="step3" class="steps" style="height:50px" οnmοuseοver="showDetail()" οnmοuseοut="hideDetail()">Step 3 </div>
<div id="step4" class="steps" style="height:50px" οnmοuseοver="showDetail()" οnmοuseοut="hideDetail()">Step 4</div>
<div id="step5" class="steps" style="height:50px" οnmοuseοver="showDetail()" οnmοuseοut="hideDetail()">Step 5</div>
<div id="step6" class="steps" style="height:50px" οnmοuseοver="showDetail()" οnmοuseοut="hideDetail()">Step 6</div>
<div id="step7" class="steps" style="height:50px" οnmοuseοver="showDetail()" οnmοuseοut="hideDetail()">Step 7</div>
</div>
<div id="details" style="visibility:hidden; float:left;width:300px;height:300px;background-color:red">This is test rank</div>
</div>
</body>
<script type="text/javascript">
function showDetail() {
var detaildiv = document.getElementById('details');
var sourcediv = event.srcElement;
detaildiv.innerText = sourcediv.id;
detaildiv.style.visibility = 'visible';
}
</html>
function hideDetail() {
var detaildiv = document.getElementById('details');
detaildiv.style.visibility = 'hidden';
}
</script>