Javascript 另一个元素悬停时的转换锚文本

当鼠标悬停在徽标上时，我试图使锚定标记中的文本转换。我有一个标志上的过渡，我想匹配的锚文本，但文本从来没有过渡。锚文本可见性最初设置为“隐藏”，应缓慢显示。这可以单独使用css来完成，还是需要使用JavaScript或jquery

谢谢

.集装箱{
身高：100%；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
}
.货柜a{
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
}
.圆形标志{
宽度：10em；
高度：10公分；
边界：0.8em双倍；
边界半径：6em；
z指数：0；
-网络工具包盒阴影：0px 10px 8px 0px rgba（50,50,50,0.75）；
-moz盒阴影：0px 10px 8px 0px rgba（50,50,50,0.75）；
盒子阴影：0px 10px 8px 0px rgba（50,50,50,0.75）；
过渡：所有1都易于输入输出；
-webkit转换：所有1都易于输入输出；
-moz转换：所有1都易于输入输出；
}
.圆圈标志a{
字号：7em；
颜色：#000000；
文本对齐：居中；
线高：0.98；
字体系列：鲍曼，草书；
过渡：所有1都易于输入输出；
-webkit转换：所有1都易于输入输出；
-moz转换：所有1都易于输入输出；
}
.圆形标志：悬停{
z指数：1000；
颜色：#FFFFFF；
背景色：#403E3E；
文字装饰：无；
过渡：所有1都易于输入输出；
-webkit转换：所有1都易于输入输出；
-moz转换：所有1都易于输入输出；
}
.圆形徽标：将鼠标悬停在a上{
颜色：#FFFFFF；
过渡：所有1都易于输入输出；
过渡：所有1都易于输入输出；
-webkit转换：所有1都易于输入输出；
-moz转换：所有1都易于输入输出；
}
.按钮{
背景色：#868686；
}
.button-group.偶数-4 li a{
左边界：无；
过渡：所有1都易于输入输出；
-webkit转换：所有1都易于输入输出；
-moz转换：所有1都易于输入输出；
}
#可见的{
不透明度：1；
过渡：所有1都易于输入输出；
-webkit转换：所有1都易于输入输出；
-moz转换：所有1都易于输入输出；
}
#可见：悬停{
#隐藏的{
不透明度：1；
过渡：所有1都易于输入输出；
-webkit转换：所有1都易于输入输出；
-moz转换：所有1都易于输入输出；
}
}

我想用logo这个词来描述它是不对的。我指的是circle logo类中的锚定标签。你有没有一个你想做的例子。我还是不明白你的要求。@cport1我终于让它起作用了。我只需要更改一些html并使用sass进行一些嵌套。我已经更新了代码和fiddle链接，以便您可以看到我试图实现的目标。

<div class="row container">
  <div id="visible">

  <div class="small-4 small-centered medium-3 medium-centered large-2 large-centered columns">
    <div class="circle-logo">
      <a href="#">dp</a>
    </div>
  </div>


<div id="hidden" class="small-8 small-centered medium-9 medium-centered large-10 large-centered columns">
    <ul class="button-group even-4 sans">
      <li><a href="blog.html" class="small button secondary">Blog</a></li>
      <li><a href="#" class="small button secondary">Projects</a></li>
      <li><a href="#" class="small button secondary">Resume</a></li>
      <li><a href="#" class="small button secondary">Contact</a></li>
    </ul>
  </div>
  </div>
</div>


.container {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
.container a {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.circle-logo {
width: 10em;
height: 10em;
border: 0.8em double;
border-radius: 6em;
z-index: 0;
-webkit-box-shadow: 0px 10px 8px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 10px 8px 0px rgba(50, 50, 50, 0.75);
box-shadow: 0px 10px 8px 0px rgba(50, 50, 50, 0.75);
transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
}
.circle-logo a {
font-size: 7em;
color: #000000;
text-align: center;
line-height: 0.98;
font-family: Baumans, cursive;
transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
}
.circle-logo:hover {
z-index: 1000;
color: #FFFFFF;
background-color: #403E3E;
text-decoration: none;
transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
}
.circle-logo:hover a {
color: #FFFFFF;
transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
}
.button.secondary {
background-color: #868686;
}
.button-group.even-4 li a {
border-left: none;
transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
}
#visible {
opacity: 1;
transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
}
#visible:hover {
  #hidden {
    opacity:1;
    transition: all 1s ease-in-out;
   -webkit-transition: all 1s ease-in-out;
   -moz-transition: all 1s ease-in-out;
  }
}