html - 我怎样才能使 :hover area of effect inside the element with the property?

Question

一切正常，除了我的鼠标激活 :hover 当它经过圆应该正常定位的区域时(我正在改变 CSS 上的位置)。如何将 :hover 区域移动到圆圈所在的位置？

html:
<div id="texto_circulo">
 <a href="facebook.com"><b>Outsourcing empresarial</b>
 <br>
  para hacer crecer 
 <br>
<b>tu negocio</b>
</a>
</div>



 css:
#tu-negocio a {
  height: 400px;
  width: 400px;
  font-size:2.2em;
  color:#fff !important;
  line-height:150%;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  background: #009CDE;
  border-radius:50%;
  position:relative ;
  top:-10px;
  left:66%;
  z-index:1;
  opacity:0.7;
  filter:alpha(opacity=70); /* For IE8 and earlier */
  }


#tu-negocio a:hover {
  height: 400px;
  width: 400px;
  font-size:2.2em;
  color:#fff !important;
  line-height:150%;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  background: #E22F05;
  border-radius:50%;
  position:relative ;
  top:-10px;
  left:66%;
  z-index:1;
  opacity:0.8;
  filter:alpha(opacity=80); /* For IE8 and earlier */
  }

Answer 1

您没有 ID 为 tu-negocio 的元素。试试这个:

 <div id="tu-negocio">
 <a href="facebook.com"><b>Outsourcing empresarial</b>
 <br>
  para hacer crecer 
 <br>
<b>tu negocio</b>
</a>
</div>
<style>
#tu-negocio a {
  height: 400px;
  width: 400px;
  font-size:2.2em;
  color:#fff !important;
  line-height:150%;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  background: #009CDE;
  border-radius:50%;
  position:relative ;
  top:-10px;
  left:66%;
  z-index:1;
  opacity:0.7;
  filter:alpha(opacity=70); /* For IE8 and earlier */
  }


#tu-negocio a:hover {
  height: 400px;
  width: 400px;
  font-size:2.2em;
  color:#fff !important;
  line-height:150%;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  background: #E22F05;
  border-radius:50%;
  position:relative ;
  top:-10px;
  left:66%;
  z-index:1;
  opacity:0.8;
  filter:alpha(opacity=80); /* For IE8 and earlier */
  }
</style>