CSS Hover Effects?

Question

Итак, на моем веб-сайте я пытаюсь заставить это работать: посетитель нависает над этим div (круг), и граница расширяется. Проблема в том, что это происходит только тогда, когда пользователь наводится на этот конкретный div, круг div. Когда посетитель перемещает свой курсор над содержимым div внутри круга div, эффект зависания для круга (расширение границы) больше не работает. Я пытаюсь найти способ обойти это.
Это мой код:

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

Реализация:

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

благодарственные для смотреть!

Answer 1

Вот способ решить эту:

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

У вас было несколько ошибок в вашем HTML. Я исправил их и изменил свой тег на элемент div. Вы можете изменить это, если это так, как вы этого хотите.

Answer 2

Вы можете не ставить circle1content внутри circle1:

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