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中有一些错误。我也修复了这些并将你的about标签更改为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>

CSS悬停效果？

2 个答案: