Javascript CSS显示悬停在其他对象上的跨度

当我把鼠标悬停在一些图像上时，我试图使一些span文本变为apear，但我不知道怎么做，一切都在它的位置上，只需要将鼠标悬停在发送短代码时使其变为apear，代码笔中的完整代码

这是一支带密码的密码笔

HTML代码

<spam id='A1'class='texto'>texto 1</spam>
<spam id='A2'class='texto'>texto 2</spam>
<spam id='A3'class='texto'>texto 3</spam>
<spam id='A4'class='texto'>texto 4</spam>
<spam id='A5'class='texto'>texto 5</spam>
<spam id='A6'class='texto'>texto 6</spam>
<spam id='A7'class='texto'>texto 7</spam>
<spam id='A8'class='texto'>texto 8</spam>
<spam id='A9'class='texto'>texto 9</spam>

<ul class='circle-container'>
  <li><img id='1' src='http://lorempixel.com/100/100/city'></li>
  <li><img id='2' src='http://lorempixel.com/100/100/nature'></li>
  <li><img id='3' src='http://lorempixel.com/100/100/abstract'></li>
  <li><img id='4' src='http://lorempixel.com/100/100/cats'></li>
  <li><img id='5' src='http://lorempixel.com/100/100/food'></li>
  <li><img id='6' src='http://lorempixel.com/100/100/animals'></li>
  <li><img id='7' src='http://lorempixel.com/100/100/business'></li>
  <li><img id='8' src='http://lorempixel.com/100/100/people'></li>
  <li><img id='9' src='http://lorempixel.com/100/100/city'></li>
  <li><img id='10' src='http://lorempixel.com/100/100/nature'></li>

</ul>

---

要做到这一点，您需要javascript，据我所知，目前还没有单独的css解决方案，一年前我对此进行了大量研究

使用jQuery：

$().ready(function(){
   $(".circle-container li img").hover(function(){
 //first function is called on mouseover 
   $("#elementYouWantToShow").addClass("SomeClassSansDisplay");
}, function(){
//Second funtion is called on mouse leave
  $("#elementYouWantToShow").removeClass("SomeClassSansDisplay");
 });
});   

顺便说一句，干得不错

如果您有许多元素，每个元素都显示不同的元素，那么您将需要一个each函数，如下所示：

$().ready(function(){
   $(".circle-container li img").each(function(index){$(this).hover(function(){
 //first function is called on mouseover 
   $("#elementYouWantToShow"+index).addClass("SomeClassSansDisplay");
}, function(){
//Second funtion is called on mouse leave
  $("#elementYouWantToShow"+index).removeClass("SomeClassSansDisplay");
  });
 });
}); 

---

并将元素重命名为elementYouWantToShow0、elementYouWantToShow1、elementYouWantToShow2等等。

在当前结构中，仅使用CSS是不可能的。如果您可以重新构造html，那么您可以查看CSS选择器。

例如，在要显示的元素中，鼠标悬停在该元素之后，可以使用：

.element:hover + .texto

如果元素是子元素，那么可以这样做

.element:hover .texto

使用jQuery：

(function ($) {

    $(".circle-container li img").on({
        mouseenter: function () { //stuff to do on mouse enter
        var id = $(this).attr('id');
        $('#A'+id).css('display','inherit');

    },
    mouseleave: function () {
        //stuff to do on mouse leave
        var id = $(this).attr('id');
        $('#A'+id).removeAttr('style');
    }
});

}(jQuery));

演示：

仅CSS解决方案：

重新构造HTML以利用相邻的同级选择器

文本1

img:hover+.texto{ 显示：块； }

反转文本定位的翻译转换

.texto{transform:rotate$rot*1deg+18deg translate-$half parent-6 rotate$rot*-1deg-18deg；}

---

.texto元素可能需要额外的样式，因为它们移动了容器。

为什么是垃圾邮件？您是指垃圾邮件还是span？确定使用JS解决方案吗？文本应该在整个圆圈内居中，还是在每个单独的圆圈图像上居中？是的，可以使用JS，但我更喜欢不太了解JS！是的，文本应该在圆圈的中心，我刚刚混合了一些代码，我发现使用它可以工作$。readyfunction{$1.hoverfunction{//第一个函数在鼠标上调用$A1.addClasstextoshow；}，函数{//第二个函数在鼠标离开$A1.removeClasstextoshow；}；但是有一种方法我可以做一个简短的代码？例如，当鼠标悬停在元素3上时，它会显示元素A3，因此我不需要为每个元素创建一个脚本？如果我重新构造html，我需要修复每个文本位置，因此我认为最好使用JSSure。什么最适合你。祝你好运

(function ($) {

    $(".circle-container li img").on({
        mouseenter: function () { //stuff to do on mouse enter
        var id = $(this).attr('id');
        $('#A'+id).css('display','inherit');

    },
    mouseleave: function () {
        //stuff to do on mouse leave
        var id = $(this).attr('id');
        $('#A'+id).removeAttr('style');
    }
});

}(jQuery));