将鼠标悬停在div A上并更改div B

时间：2016-02-04 22:47:29

标签： html css parent

我正在通过CSS进行工具提示，但我遇到了一个我不知道该怎么做的问题。 当我打开工具提示并将鼠标放在工具提示的窗口上时，我想保持链接的CSS以打开窗口。 您可以查看http://jsfiddle.net/u7tYE/7458/

问题在于：

.tooltip{
    display:inline;
    position:relative;
}
.tooltip:hover .tooltip-item::after{
    pointer-events:auto;
}
.tooltip:hover .tooltip-content{
    -webkit-transform:translate3d(0,0,0) rotate3d(0,0,0,0);
    opacity:1;
    pointer-events:auto;
    transform:translate3d(0,0,0) rotate3d(0,0,0,0);
}
.tooltip-item{
    cursor:pointer;
    display:inline-block;
}
.tooltip-item::after{
    -webkit-transform:translateX(-50%);
    bottom:100%;
    content:'';
    cursor:default;
    height:20px;
    left:50%;
    pointer-events:none;
    position:absolute;
    transform:translateX(-50%);
    width:300px;
}
.tooltip-content{
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	-ms-border-radius:3px;-o-border-radius:3px;
    background-color:rgba(255,255,255,0.8);
	border-radius:3px;
    bottom:100%;
    box-shadow:-5px -5px 15px rgba(60,60,60,0.2);
    cursor:default;
    font-size:0.765em;
    left:50%;
    line-height:1.5;
    margin:0px 0px 10px -150px;
    opacity:0;
    pointer-events:none;
    position:absolute;
    text-align:left;
    width:300px;
    z-index:999;
}
.tooltip-content::after{
    border-top-color:rgba(255,255,255,0.8);
    border-width:10px;
    content:'';
    cursor:default;
    height:0px;
    left:50%;
    margin-left:-10px;
    pointer-events:none;
    position:absolute;
    top:100%;
    width:0px;
}
.tooltip-effect .tooltip-content{
    -webkit-transform:perspective(1000px) rotate3d(1,0,0,45deg);
    -webkit-transform-origin:50% calc(100% + 10px);
    -webkit-transition:opacity 0.2s, -webkit-transform 0.2s;
    transform:perspective(1000px) rotate3d(1,0,0,45deg);
    transform-origin:50% calc(100% + 10px);
    transition:opacity 0.2s, transform 0.2s;
}
.tooltip.tooltip-effect:hover .tooltip-content{
    -webkit-transform:perspective(1000px) rotate3d(1,0,0,0deg);
    transform:perspective(1000px) rotate3d(1,0,0,0deg);
}
.tooltip-text{
    color:#333333;
    cursor:default;
    display:block;
    font-family:"Century Gothic";
    font-size:14px;
    line-height:1.35;
    padding:15px 15px 15px 15px;
}
#developer-div-1:hover ~ #developer-link-1{-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;background-color:#333333;border-radius:3px;color:#E8E8E8;}
#developer-div-2:hover ~ #developer-link-2{-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;background-color:#333333;border-radius:3px;color:#E8E8E8;}
<br /><br /><br /><br /><br /><br /><p>&copy; 2016 - Feito com <i class="fa fa-heart"></i> pela <span class="tooltip tooltip-effect"><span class="tooltip-item"><a href="http://www.agenciacabralia.com.br/" id="developer-link-1" target="_blank">Ag&ecirc;ncia Cabr&aacute;lia</a></span><span class="tooltip-content clearfix" id="developer-div-1"><span class="tooltip-text">Rafael Corazza<br />11 96607-0940<br />contato@agenciacabralia.com.br<br />www.agenciacabralia.com.br</span></span></span> e <span class="tooltip tooltip-effect"><span class="tooltip-item"><a href="http://www.estruturaonline.com.br/" id="developer-link-2" target="_blank">EstruturaOnline.com.br</a></span><span class="tooltip-content clearfix" id="developer-div-1"><span class="tooltip-text">Danilo Rago<br />11 97977-7636<br />danilo@estruturaonline.com.br<br />www.estruturaonline.com.br</span></span></span></p>

Someboy知道如何在鼠标悬停在工具提示上打开工具提示时将链接的背景保持为黑色？

提前全部谢谢！

2 个答案:

答案 0 :(得分：0)

您可以在链接中添加工具提示，因此当您悬停工具提示时，您也会悬停链接。

这是一个简单的例子

.tooltip {
  display: inline;
  position: relative;
}

.tooltip-content {
  position: absolute;
  left: 50%;
  bottom: 100%;
  z-index: 999;
  width: 300px;
  margin: 0px 0px 10px -150px;

  border-radius: 3px;
  box-shadow: -5px -5px 15px rgba(60, 60, 60, 0.2);

  opacity: 0;
  transform: perspective(1000px) rotate3d(1, 0, 0, 45deg);
  transform-origin: 50% calc(100% + 10px);
  transition: opacity 0.2s, transform 0.2s;

  padding: 1em;
  color: black;
  text-decoration: none;

  cursor: default;
}

.tooltip-item:hover a {
  background: black;
  color: white;
}

.tooltip-item:hover .tooltip-content {
  opacity: 1;
  transform: translate3d(0, 0, 0) rotate3d(0, 0, 0, 0);
}
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<p>&copy; 2016 - Feito com <i class="fa fa-heart"></i> pela
<span class="tooltip tooltip-effect">
  <span class="tooltip-item">
    <a href="http://www.agenciacabralia.com.br/" id="link1" target="_blank">Ag&ecirc;ncia Cabr&aacute;lia
      <span id="developer1" class="tooltip-content clearfix">
        <span class="tooltip-text">
          Rafael Corazza<br />
          11 96607-0940<br />
          contato@agenciacabralia.com.br<br />
          www.agenciacabralia.com.br
        </span>
      </span>
    </a>
  </span>
</span>
</p>

答案 1 :(得分：0)

你的意思是什么？

.tooltip:hover a {
    background-color: black;
}

完整示例

.tooltip{
    display:inline;
    position:relative;
}
.tooltip:hover .tooltip-item::after{
    pointer-events:auto;
}
.tooltip:hover .tooltip-content{
    -webkit-transform:translate3d(0,0,0) rotate3d(0,0,0,0);
    opacity:1;
    pointer-events:auto;
    transform:translate3d(0,0,0) rotate3d(0,0,0,0);
}
.tooltip:hover a {
    background-color: black
}
.tooltip-item{
    cursor:pointer;
    display:inline-block;
}
.tooltip-item::after{
    -webkit-transform:translateX(-50%);
    bottom:100%;
    content:'';
    cursor:default;
    height:20px;
    left:50%;
    pointer-events:none;
    position:absolute;
    transform:translateX(-50%);
    width:300px;
}
.tooltip-content{
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	-ms-border-radius:3px;-o-border-radius:3px;
    background-color:rgba(255,255,255,0.8);
	border-radius:3px;
    bottom:100%;
    box-shadow:-5px -5px 15px rgba(60,60,60,0.2);
    cursor:default;
    font-size:0.765em;
    left:50%;
    line-height:1.5;
    margin:0px 0px 10px -150px;
    opacity:0;
    pointer-events:none;
    position:absolute;
    text-align:left;
    width:300px;
    z-index:999;
}
.tooltip-content::after{
    border-top-color:rgba(255,255,255,0.8);
    border-width:10px;
    content:'';
    cursor:default;
    height:0px;
    left:50%;
    margin-left:-10px;
    pointer-events:none;
    position:absolute;
    top:100%;
    width:0px;
}
.tooltip-effect .tooltip-content{
    -webkit-transform:perspective(1000px) rotate3d(1,0,0,45deg);
    -webkit-transform-origin:50% calc(100% + 10px);
    -webkit-transition:opacity 0.2s, -webkit-transform 0.2s;
    transform:perspective(1000px) rotate3d(1,0,0,45deg);
    transform-origin:50% calc(100% + 10px);
    transition:opacity 0.2s, transform 0.2s;
}
.tooltip.tooltip-effect:hover .tooltip-content{
    -webkit-transform:perspective(1000px) rotate3d(1,0,0,0deg);
    transform:perspective(1000px) rotate3d(1,0,0,0deg);
}
#developer1:hover + #link1{
	background-color:#FF0000;
}
.tooltip-text{
    color:#333333;
    cursor:default;
    display:block;
    font-family:"Century Gothic";
    font-size:14px;
    line-height:1.35;
    padding:15px 15px 15px 15px;
}
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><p>&copy; 2016 - Feito com <i class="fa fa-heart"></i> pela <span class="tooltip tooltip-effect"><span class="tooltip-item"><a href="http://www.agenciacabralia.com.br/" id="link1" target="_blank">Ag&ecirc;ncia Cabr&aacute;lia</a></span><span id="developer1" class="tooltip-content clearfix"><span class="tooltip-text">Rafael Corazza<br />11 96607-0940<br />contato@agenciacabralia.com.br<br />www.agenciacabralia.com.br</span></span></span> e <span class="tooltip tooltip-effect"><span class="tooltip-item"><a href="http://www.estruturaonline.com.br/" target="_blank">EstruturaOnline.com.br</a></span><span class="tooltip-content clearfix"><span class="tooltip-text">Danilo Rago<br />11 97977-7636<br />danilo@estruturaonline.com.br<br />www.estruturaonline.com.br</span></span></span></p>

相关问题
最新问题