Hover state not affecting display property [closed]

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center. Closed 9 years ago.

I have the following html code:

<div class="trial1">
He said all but the three newest reactors will be shut down by 2021, a开发者_如何转开发nd the remainder a year later.Roettgen announced the agreement early on Monday morning after hour-long negotiations between the governing parties.Merkel in 2010 had pushed through to extend the lifespan of the country's 17 reactors with the last one scheduled to go offline in 2036, but she completely reversed her policy in the wake of Japan's nuclear disaster. She described the new move as a step that will make her country a pioneer in renewable energy.

<h1>This is h1</h1>

    <div class="trial2">
     this is something else what ever what ever
     </div>
</div>

and i have the follwoing css:

.trial1
{
    position:relative;
}
.trial2
{
    display:none;
    position:absolute;
    z-index:20;
    top:1;
    left:1;
    width:30px;
    height:30px;
}
.trial1:hover>.trial2
{
    display:block;
}
.trial1:hover>h1
{
    color:red;
}

Whenever the content in trial1 is hovered I am expecting the content in trail2 to be displayed. But somehow this doesn't happen. A similar transition of changing the color of h1 on hover of the same element is working? What am I doing wrong?

---

Missing .

.trial1:hover>.trial2