我不想更改<span>悬停

上的按钮背景请看看我的jsfiddle示例，并请帮助我如何将鼠标悬停在跨文本上时保持按钮背景。当我将鼠标悬停在按钮上时，按钮会更改背景 - button_active.gif，但问题是当我将鼠标悬停在范围上时，因为此时按钮的背景已更改。我不想更改<span>悬停

Fiddle

<div class="button"> 
    <a href="#" title="Opširnije..."> 
    <span>Više</span> 
     <img src="http://mile.x3.rs/mile/palma/img/button.gif" onmouseover="this.src='http://mile.x3.rs/mile/palma/img/button_active.gif'" onmouseout="this.src='http://mile.x3.rs/mile/palma/img/button.gif'"> 
    </a> 
</div>

来源

2015-10-30 Mile Mijatović

使用CSS来设置背景图片。 JavaScript是相当复杂的做法。

然后，您的悬停效果可以与文本颜色同时更改背景图像。

（如果需要使用JavaScript来做到这一点，调用JavaScript的标签，而不是像上）

来源

2015-10-30 18:53:37

.button span { 
 
\t font-family: 'Georgia'; 
 
\t text-transform: uppercase; 
 
\t font-size: 13px; 
 
\t color: #FFFFFF; 
 
\t position: absolute; 
 
\t top: 20px; 
 
\t left: 40px; 
 
\t z-index: 2; 
 
    background: url('http://mile.x3.rs/mile/palma/img/button.gif') no-repeat; 
 
    padding: 14px 37px 30px 37px; 
 
} 
 
.button:hover span:hover{background: url('http://mile.x3.rs/mile/palma/img/button_active.gif') no-repeat;} 
 
.button:hover span, 
 
.button:hover:before {color: #88bfaa;}

<div class="button"> 
 
    <a href="#" title="Opširnije..."> 
 
    \t <span>Više</span> 
 
\t </a> 
 
</div>

来源

2015-10-30 18:54:29 365DaysMasti

你的跨度是在图片上方，所以它捕获自己的悬停事件，使图像的悬停事件无效（一次只能悬停一个元素）。

选项1（无需重新工作的代码）

一种解决方案是增加pointer-events: none的CSS您span。这意味着指针不会与跨度进行交互。注意：这也意味着跨度不能被点击或选择！

.button span { 
 
    font-family: 'Georgia'; 
 
    text-transform: uppercase; 
 
    font-size: 13px; 
 
    color: #FFFFFF; 
 
    position: absolute; 
 
    top: 20px; 
 
    left: 40px; 
 
    z-index: 2; 
 
    pointer-events: none; /* this causes the hover event for span not to trigger */ 
 
} 
 
.button:hover span, 
 
.button:hover:before { 
 
    color: #88bfaa; 
 
}

<div class="button"> 
 
    <a href="#" title="Opširnije..."> 
 
    <span>Više</span> 
 
    <img src="http://mile.x3.rs/mile/palma/img/button.gif" onmouseover="this.src='http://mile.x3.rs/mile/palma/img/button_active.gif'" onmouseout="this.src='http://mile.x3.rs/mile/palma/img/button.gif'"> 
 
    </a> 
 
</div>

选项2（清洁液）

一个更好的解决办法是设置悬停事件对整个a标签（因为这是你所希望的一个无论如何点击！），并使用CSS而不是JavaScript。在这种情况下，使用背景图片代替img标签也会更好。以下是一个示例实现。

.button { 
 
    display: block; 
 
    background: url('http://mile.x3.rs/mile/palma/img/button.gif'); 
 
    /* these are the dimensions of button.gif */ 
 
    width: 103px; 
 
    height: 51px; 
 
} 
 
.button span { 
 
    font-family: 'Georgia'; 
 
    text-transform: uppercase; 
 
    font-size: 13px; 
 
    color: #FFFFFF; 
 
    position: absolute; 
 
    top: 20px; 
 
    left: 40px; 
 
    z-index: 2; 
 
} 
 

 
.button:hover span { 
 
    color: #88bfaa; 
 
} 
 
.button:hover { 
 
    background: url('http://mile.x3.rs/mile/palma/img/button_active.gif'); 
 
}

<!-- the HTML is much simpler! it contains content only, no decoration --> 
 
<a href="#" title="Opširnije..." class="button"> 
 
    <span>Više</span> 
 
</a>

来源

2015-10-30 18:57:44

我不想更改<span>悬停

回答

相关问题