Question

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!

Answer 1

Here’s a way to solve this:

#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; }

#wrapperAll {
    position: relative;
}

#textWrapper {
    position: absolute;
    top: 80px;
    left: 80px;
}

h1 {
    margin: 0;
    padding: 0;
}

Html:

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

           </div>
  </div> 

You had a few errors in your HTML. I fixed those as well and changed your about tag into a div element. You can change that back if that’s the way you want it.