Struggling to get this code snippet to work properly, I am attempting to display a div (inside an li element) when hovering over the img or li. Can someone provide guidance?
HTML
<ul class="step-nav clearfix" id="leftright">
<li class="pret button" id="pret" style="left:50%; top:50%; margin-left: -635px; position:fixed">
<a class="pLocation linkFX" style="outline: 0;" href="blah"><img src="images/arrow.png"></a>
<a class="sublinkCat" style="color: #fff;" href="blah">
<div class="titlePR">
<h1 class="title" style="margin-top: 25px;font-family: Arial, sans-serif; font-size: 14px; text-align: center;">Title</h1>
</div>
</a>
</li>
</ul>
CSS
.titlePR {
display: none;
left:50%;
top:50%;
margin-left: -600px;
position:fixed;
width: 154px;
height: 70px;
background: #222;
text-align: center;
vertical-align:middle;
}
.pret:hover + .titlePR {
display: block;
}