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

Question

我正在通过 CSS 做一个工具提示，但我遇到了一个问题，我不知道该怎么做。当我打开工具提示，将鼠标放在工具提示的window上时，我想保持link的css打开window。您可以查看 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>

小弟知道如何在鼠标悬停在工具提示上打开工具提示时保持link黑色的背景吗？

提前致谢！

Answer 1

您可以在 link 内添加工具提示，因此当您将鼠标悬停在工具提示上时，您也会将鼠标悬停在 link.

这是一个简单的例子

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

Answer 2

你是说类似的意思吗？

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

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

hover on div A and change div B

html

css

parent

完整示例