Question

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

我像这样定义我的图像：

＆＃13;

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

＆＃13;

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

＆＃13;

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

旁注：我意识到问题只发生在Chrome中。它不会出现在IE或Firefox中。

Answer 1

如果图像src不存在，浏览器将显示alt或标题图像。由于您有具有背景图像的类，因此不需要img元素。因此，您可以将html更新为

<div class="left" id="mToggle" style="height:64px;width:64px" title="new toggle button" />

供参考 - https://jsfiddle.net/os7svkw1/5/

Answer 2

这是因为您的图片没有设置src属性，在这种情况下，它会显示alt或title属性而不是图片。您输入的图片是css background-image，与使用input type="image"设置的src标记不同。

如果您仍想保留css，请使用其他内容，例如div：

<div class="left" id="mToggle" title="new toggle button"></div>

https://jsfiddle.net/lucianmoldovan/os7svkw1/6/

否则设置src标记的input type="image"属性。

Answer 3

<input/>：

type="image"：图形提交按钮。 您必须使用src属性来定义图片来源，并使用alt属性来定义替代文字。 您可以使用{{ 1}}和height属性用于定义图像的大小。

^{（强调我的）}

因此，您的HTML无效。您需要按钮在下面的代码段中显示。

如果您已使用JavaScript切换width class，我建议您删除CSS规则，而是直接更改图片onclick。您是否可以根据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';
  }
});

（使用上面的JS代码或jQuery等价的代码。）

隐藏输入上的标题文本，其中type =＆＃34; image＆＃34;

3 个答案: