Question: I would like to include multiple views within a view in ZF2.
I read this link:
<http://framework.zend.com/manual/current/en/modules/zend.view.quick-start.html>

but there is a problem. In this way, I have to pass the values that are within a view, like this:

```
$secondView = new ViewModel (array('var1' => $var1 ......));

```

In this mode the controller and second action are bypassed. 
Is there a way to include a view without bypassing them? I would like variables to be passed from the second action controller, like an include php statement

Answer: 
The easiest way is to add `pointer-events: none;` to the `#second` div CSS and position it above the `#first` div.

> 
> `pointer-events: none;` In addition to indicating that the element is not the target of mouse events, the value `none` instructs the mouse event to go "through" the element and target whatever is "underneath" that element instead.  
> (...)  
> 
>  The element is never the target of mouse events; however, mouse events may target its descendant elements if those descendants have pointer-events set to some other value. In these circumstances, mouse events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/bubble phases.
> 
> 
> 

[Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events)

```js
$(document).ready(function(){
    var slide = $("#second");
    $("#first").hover(function(){
        slide.stop().slideDown("slow");
    },function(){
        slide.slideUp("slow");
    });
});
```

```css
#first { 
    width: 100px; 
    height: 100px; 
    background:red; 
}

#second {
    position: absolute; 
    display: none; 
    width: 100px; 
    height: 100px; 
    background:blue;
    pointer-events: none;
}
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="second">Second</div>
<div id="first">First</div>
```

---

Another way is to insert these two elements inside another element and use `hover` for that element instead of div `#first`. This way, the whole area is sensitive:

```js
$(document).ready(function(){
    var slide = $("#second");
    $(".my-hover").hover(function(){
        slide.stop().slideDown("slow");
    },function(){
        slide.slideUp("slow");
    });

    //for demo:
    $('.btn').click(function(){
        alert('it works!');
    });

});
```

```css
#first { 
    width: 100px; 
    height: 100px; 
    background:red; 
}

#second {
    position: absolute; 
    display: none; 
    width: 100px; 
    height: 100px; 
    background:blue;
}
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=my-hover>
    <div id="second"><button class=btn>BUTTON</button></div>
    <div id="first">First</div> 
</div>
```
Okay here you go :

```js
var $second=$("#second");

$("#first").hover(function(){
   $second.stop().slideDown("slow");
},function(){
   $second.stop().slideUp("slow");
  });
```

```css
div{
    width: 100px;
    height: 100px;
    background: green;
    margin-right: 10px;
    float: left ;
    position: absolute;
    top:0;
    left:0;
}
#second{
  display: none;
  background: yellow;
  pointer-events : none;
}
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="first">1</div>
<div id="second">2</div>
```