Okay, so on my website, I'm trying to get this to work: The visitor hovers over this div (a circle) and the border expands. The problem is that this only occurs when the user hovers on that specific div, the circle div. Once the visitor moves his/her cursor over the content div inside the circle div, the hover effect for the circle (the border expanding) no longer works. I'm trying to find a way around this. 

This is my code:

CSS: 

```
#circle1 {
float: left;
margin: 20px;
width: 300px;
height: 300px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background-color: #C2DD91;
opacity:0.5;
border: 20px solid #738356;
// for IE5-7
filter: alpha(opacity=50);
position: relative; }

#circle1:hover {
border: 30px solid #738356;
margin: 10px; }

.circle1content {
position: relative;
width: 220px;
top: -300px;
left: 78px;
z-index: 999;
opacity:1.5;
text-align: justify;
 }

.circle1content h1 {
font-family: Helvetica, Arial, sans-serif;
font-size: 28px;
font-style: normal;
font-weight: bold;
text-transform: normal;
letter-spacing: -1px;
line-height: 1.2em;
color: #F3FFDE;
text-shadow: #bbb 0.1em 0.1em 0.1em;
text-align: center; }

about1 {
font-family: Georgia, serif;
font-size: 10px;
font-style: normal;
font-weight: normal;
text-transform: uppercase;
letter-spacing: 1px;
line-height: 2em;
color: #777; }

```

Implementation: 

```
 <div id="circle1"></div>
          <div class="circle1content">
            <h1>about</h1>
            </br>
            <about1>
            Some text here.... blah blah blah..
            </about1>
           <div>

```

Thank-you for looking!