Navigate on mouse click and change colour on mouse over of div using jquery

<c:forEach items="${pagedListHolder.pageList}" var="user">
                    <div class="dataName" id开发者_Go百科="userlist" onclick="DoNav('${pageContext.request.contextPath}/secure/user/${user.id}');" >
                        <div class="dataName1">${user.name}</div>
                        <div class="dataName2">${user.email}</div>
                        <div class="dataName3">${user.id}</div>
                    </div>
                </c:forEach>

I have above div defined, now what i want is when user clicks upon any of div , he/she will navigate to a new page which is dynamic(based on userid), and change the div color too on mouse over using jquery. How can i do it, please suggest Thanks Romi

Basically you have class name to div as - dataName So you just have to attached two event to it -

$('.dataName').hover(function(){
   // Code to have change css of the div. which will give hover effect.
})

and for click event -

$('.dataName').click(function(event){
  event.preventDefault();
  window.location = this.attr('data-url')
})

while you have to keep you url to redirect in that div with attribute data-url as -

 <div class='dataName' data-url='createUrlHere'></div>