html - 在键入 ="image"的输入中隐藏标题文本

Question

我想使用图像类型的输入，当悬停在上面时也有标题文本显示。但是，此文本始终显示在图像“后面”。

我这样定义我的图像:

.left {
  background-image: url("http://uxrepo.com/static/icon-sets/flat-arrows/png32/64/000000/flat-circle-chevron-left-arrow-64-000000.png");
}

<input type="image" class="left" id="mToggle" width="64" height="64" value=" " title="new toggle button"/>

CSS 类的原因是因为我在点击时切换图像。这是一个JSFiddle .

旁注:我发现问题只出现在 Chrome 中。它不会出现在 IE 或 Firefox 中。

Answer 1

<input/> :

type="image": A graphical submit button. You must use the src attribute to define the source of the image and the alt attribute to define alternative text. You can use the height and width attributes to define the size of the image in pixels.

^{(强调我的)}

因此，您的 HTML 无效。您需要让按钮看起来像下面的代码片段。

如果您已经切换了 class onclick对于 JavaScript，我建议您放弃 CSS 规则，而是更改图像 src直接地。您是否使切换依赖于 class , alt或 src属性，是你的选择。

document.getElementById('mToggle').addEventListener('click',function(){
  if(this.className=='left'){
    this.src='http://uxrepo.com/static/icon-sets/flat-arrows/png32/64/000000/flat-circle-chevron-right-arrow-64-000000.png';
    this.alt='→';
    this.className='right';
  }
  else{
    this.src='http://uxrepo.com/static/icon-sets/flat-arrows/png32/64/000000/flat-circle-chevron-left-arrow-64-000000.png';
    this.alt='←';
    this.className='left';
  }
});

<input id="mToggle" class="left" type="image" width="64" height="64"
  src="http://uxrepo.com/static/icon-sets/flat-arrows/png32/64/000000/flat-circle-chevron-left-arrow-64-000000.png"
  alt="←" value=" " title="new toggle button"/>

(使用上面的 JS 代码或任何等效的 jQuery。)