hover on div A and change div B

I'm doing a Tooltip via CSS but I'm having one issue that I don't know what to do anymore. When I open the tooltip and put the mouse over the window of the tooltip, I want to maintain the css of link to open the window. You can check on http://jsfiddle.net/u7tYE/7458/

The problem is here:

.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 />[email protected]<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 />[email protected]<br />www.estruturaonline.com.br</span></span></span></p>

Someboy knows how to maintain the background of the link black when it's opened the tooltip with the mouse over the tooltip?

Thanks all in advance!

Solution

You mean something like that?

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

Complete example

.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 />[email protected]<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 />[email protected]<br />www.estruturaonline.com.br</span></span></span></p>