CSSを表示すると、他のオブジェクトの上にホバーが表示される

Question

いくつかの画像にマウスポインタを置いたときにスパンテキストを表示しようとしていますが、これを行う方法を理解できず、すべてがその位置にあり、ここで

（コードペンでshortnedコード、完全なコードを送信）を超えるホバリング時にコードとコードのペンがある 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コード

jQueryを使ってあなたはジャバスクリプトがそうする必要がある

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

、何のCSSだけでは解決策は、私の知る限り利用できません（私は一年前にこの上の多くの研究）

：

$().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"); 
    }); 
}); 
}); 

：あなたは別の要素一つ一つを示す多くの要素を持っている場合は、

方法により、you'llはこのように、各機能を必要とします

要素の名前をelementYouWantToShow0、elementYouWantToShow1、elementYouWantToShow2などと変更します。

Answer 3

現在の構造では、これはCSSでは不可能です。 htmlを再構成できる場合は、CSSセレクタを見ることができます。表示したい要素における例えば https://www.w3schools.com/cssref/css_selectors.asp

はすぐに使用できる上、あなたがホバーその要素の後にある：

.element:hover + .texto 

要素が子供であるなら、あなたはそのようにそれを行うことができます。 jQueryのを使用して

.element:hover .texto 

Answer 4

：

(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