Question

当我将鼠标悬停在一些图像上时，我正试图制作一些跨度文本，无法弄清楚如何做到这一点，一切都在它的位置，只需要在悬停时使其成为apear（发送一个缩短的代码，代码笔中的完整代码）

这是一个包含代码的代码笔 https://codepen.io/LCastroN/pen/KqQjaw?editors=1100

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>

SCSS代码

/// Mixin to put items on a circle
/// [1] - Allows children to be absolutely positioned
/// [2] - Allows the mixin to be used on a list
/// [3] - In case box-sizing: border-box has been enabled
/// [4] - Allows any type of direct children to be targeted
/// 
/// @param {Integer} $nb-items - Number or items
/// @param {Length} $circle-size - Container size
/// @param {Length} $item-size - Item size
/// @param {String | false} $class-for-IE - Base class name for old IE
@mixin distribute-on-circle( 
  $nb-items,
  $circle-size,
  $item-size,
  $class-for-IE: false
) {
  $half-item: ($item-size / 2);
  $half-parent: ($circle-size / 2);

  position: relative; /* 1 */
  width:  $circle-size;
  height: $circle-size;
  padding: 0;
  border-radius: 50%; 
  list-style: none; /* 2 */ 
  box-sizing: content-box; /* 3 */ 

  > * { /* 4 */
    display: block;
    position: absolute;
    top:  50%; 
    left: 50%;
    width:  $item-size;
    height: $item-size;
    margin: -$half-item;
  }

  $angle: (360 / $nb-items);
  $rot: 0;

  @for $i from 1 through $nb-items {
    @if not $class-for-IE {
      @if $i % 2 == 0{
              > :nth-of-type(#{$i}) {
              transform: rotate(($rot * 1deg)+18deg) translate($half-parent + 6) rotate(($rot * -1deg) - 18deg);
        }}
        @else{
              > :nth-of-type(#{$i}) {
              transform: rotate($rot * 1deg) translate($half-parent) rotate($rot * -1deg);
          }}
    } @else {
      @if $i % 2 == 0{
      > .#{$class-for-IE}#{$i} {
        // If CSS transforms are not supported
        $mt: sin($rot * (pi() / 180)+0.1745) * $half-parent+6 - $half-item;
        $ml: cos($rot * (pi() / 180)+0.1745) * $half-parent+6 - $half-item;
        margin: $mt 0 0 $ml;
        }}
      @else {
        > .#{$class-for-IE}#{$i} {
        // If CSS transforms are not supported
        $mt: sin($rot * pi() / 180) * $half-parent - $half-item;
        $ml: cos($rot * pi() / 180) * $half-parent - $half-item;
        margin: $mt 0 0 $ml;
        }
      }
    }

    $rot: ($rot + $angle);
  }
}

.circle-container {
  @include distribute-on-circle(10, 40em, 6em, false); 
    margin: auto;
  padding: 200px 200px 200px 200px;
  position: absolute;
  //border: solid 5px tomato;
}

.circle-container img { 
  display: block; 
  width: 100%; 
  border-radius: 50%;
  filter: grayscale(100%);

  &:hover {
    filter: grayscale(0);
  }
}

.texto{
  text-align: center;
  display: none;
  margin: auto;
  position: absolute;
  padding: 500px 500px 500px 500px;
}

Answer 1

仅限CSS的解决方案：https://codepen.io/LeeKowalkowski/full/QgmwKd/

重新构建HTML以利用相邻的兄弟选择器。

<img id='1' src='http://lorempixel.com/100/100/city'><span id='A1' class='texto'>texto 1</span>

img:hover + .texto { display:block; }
撤消了文字定位的翻译转换。

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

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

Answer 2

你需要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");
 });
});

顺便说一句好工作

如果你有许多元素显示每个元素的不同元素，你需要一个每个函数，如下所示：

$().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等。

Answer 3

使用当前结构，仅使用CSS是不可能的。如果您可以重构html，那么您可以查看CSS选择器。 https://www.w3schools.com/cssref/css_selectors.asp

例如，在要悬停的元素之后，您想要显示的元素可以使用：

.element:hover + .texto

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

.element:hover .texto

Answer 4

使用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));

DEMO：click here

CSS将鼠标悬停在其他对象

4 个答案: