添加工具提示悬停到图像用css

Question

我想创建一个工具提示（使用CSS），一旦用户将鼠标移到一个元素上就会出现。我使它适用于文本，但我有问题使它适用于图像。

.container { 
    position: relative; 
    width: 15%; 
} 

.image { 
    position: relative; 
    display: inline-block; 
    width: 100%; 
    height: auto; 
} 
.image .tooltiptext2 { 
    visibility: hidden; 
    width: 150%; 
    background-color: black; 
    color: #fff; 
    text-align: center; 
    border-radius: 6px; 
    padding: 5px 0; 
    position: absolute; 
    z-index: 1; 
    top: -8px; 
    left: 110%; 
    font-size: 150%; 
    font-family: Arial; 

/* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */ 
    opacity: 0; 
    transition: opacity 1s; 
} 

.image .tooltiptext2::after { 
    content: ""; 
    position: absolute; 
    top: 50%; 
    right: 100%; 
    margin-top: -5px; 
    border-width: 5px; 
    border-style: solid; 
    border-color: transparent black transparent transparent; 
} 
.image:hover .tooltiptext2 { 
    visibility: visible; 
    opacity: 1; 
} 

你可以看到我在这个环节上做的：

https://jsfiddle.net/Ruloco/q3e4psh3/

我会apreciate任何帮助，您可以给我。提前致谢！！

Answer 1

.tooltiptext2不是.image的子女。使用.image + .tooltiptext2而不是.image .tooltiptext2使工具提示工作。

https://jsfiddle.net/8Lmz2oLj/

Answer 2

的提示是不是像一个孩子。您需要修改样式，以便图像容器是您正在倾听的东西。

.container:hover .tooltiptext2 { 
    visibility: visible; 
    opacity: 1; 
} 

https://jsfiddle.net/q3e4psh3/1/