Ng-Mouseenter-6

When mouse is enter on the div element the child div element is shown in main div and first class apply on it because Show variable value is true on ng-mouseenter directive which will assign to ng-show directive of child div element.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<style>
    div {
        width: 100px;
        height: 100px;
        border: 1px solid black;
    }

    .first > div {
        width: 25px;
        height: 25px;
        background-color: red;
    }
</style>
</head>
<body ng-app>
    <div>
        <div ng-mouseenter="Show=true" ng-mouseleave="Show=false" class="first"><div ng-show="Show || Show"></div></div>
        <div ng-mouseenter="isShow=true" ng-mouseleave="isShow=false" class="first"><div ng-show="isShow || isShow"></div></div>
    </div>
</body>
</html>

Output