鼠标悬停事件不起作用答案

【问题标题】：Mouse hover event not working鼠标悬停事件不起作用
【发布时间】：2018-07-26 20:15:31
【问题描述】：

在 Bigcommerce 网站（模板主题）上工作并尝试获取工具提示（带有 PMS 值的颜色）以显示用户何时将鼠标悬停在色样上。但是，不能让它开火/工作。鼠标悬停时没有任何反应。

这是样本的代码部分。我在要从中获取标题的 span 标签中添加了一个名为“tooltip”的类名：

    .tooltip {
   		//display: inline;
    	position: relative;
    }
		
    .tooltip:hover {
    	background: rgba(0,0,0,.8);
    	border-radius: 5px;
    	bottom: 10px;
    	color: #fff;
    	content: attr(title);
    	left: 20%;
    	padding: 5px 5px;
    	position: absolute;
    	width: 100px;
    }

    <input class="form-radio" type="radio" name="attribute[12175]" value="1061" id="attribute_1061"  required>
        <label class="form-option form-option-swatch" for="attribute_1061" data-product-attribute-value="1061">
            <span class='form-option-variant form-option-variant--color tooltip' title="Graphite (PMS Black 7)" style="background-color: #4E4B49"></span>
        </label>

感谢任何帮助....

【问题讨论】：

样本的 css 在哪里？你有一个白色的十六进制代码；悬停时工具提示应该变成白色还是样本？

标签： html css bigcommerce

【解决方案1】：

您在 css 中的 :hover 工作正常，见下文，您无法获得结果，因为您没有使用 css。我只是在包含您的 tooltip 类的 span 内写了随机单词来检查它并查看它的工作正常。

.tooltip {
   			//display: inline;
    		position: relative;
    }
		
    .tooltip:hover {
    		background: rgba(0,0,0,.8);
    		border-radius: 5px;
    		bottom: 10px;
    		color: #fff;
    		content: attr(title);
    		left: 20%;
    		padding: 5px 5px;
    		position: absolute;
    		width: 1000px;
    }

<input class="form-radio" type="radio" name="attribute[12175]" value="1061" id="attribute_1061"  required>
        <label class="form-option form-option-swatch" for="attribute_1061" data-product-attribute-value="1061">
                        <span class='form-option-variant form-option-variant--color tooltip' title="Graphite (PMS Black 7)" style="background-color: #4E4B49">fdgergerg</span>
        </label>

【讨论】：