Question

我想创建一个图库，如果用户将鼠标悬停在图像上，则应将其设置为none，并显示其下方的文本。但我必须像这样设置图像

echo "<div class=textimage style=background-image:url(pictures/head_censored.png)>Sample text</div>";

像这样，它显示的图片但悬停效果（background-image：none）未应用。如果我在css文件中声明图像它可以工作，但由于图片总是在变化，这太复杂了。有什么想法吗？

Answer 1

当您将图像内联定义时，它不起作用，因为内联优先于外部样式表。如果你想在没有javascript的情况下进行，而不是改变背景图像，尝试改变显示属性，如下所示（在css文件中）：

.textimage:hover {
  display: none;
}

然后只需将文本放在一个单独的div中。

Answer 2

如果你想在不制作复杂的javascript的情况下创建简单的东西，那么可以使用一些css技巧。

<div class='disappear'>
  <p class='text'>This image is about stuff 1</p>
  <img src='pictures/nicepeople.jpg' />
</div>
<div class='disappear'>
  <p class='text'>This image is about stuff 2</p>
  <img src='pictures/nicepeople.jpg' />
</div>
<div class='disappear'>
      <p class='text'>This image is about stuff 3</p>
      <img src='pictures/nicepeople.jpg' />
    </div>
<style type='text/css'>
 div.disappear p{
   display:none; 
 }
 div.disappear:hover p{
   display:block; 
 }
 div.disappear:hover img{
   display:none; 
 }
</style>

祝你好运：）

Answer 3

是的，实际上这可以通过一些javascript轻松完成。我更喜欢jQuery的易用性，但是选择你自己合适的味道，无论如何都归结为javascript。

所以这里的技巧是将javascript函数附加到图像元素的“onhover”事件。这样你的javascript函数就可以捕获事件。

像这样：

function changeImageTextLocation()
{
  document.getElementById(#imageID).innerHTML = "";
  document.getElementById(#captionID).innerHTML = "Some other text";
}

然后使用PHP将该函数附加到您的元素，如下所示：

echo '<img onhover="changeImageTextLocation()" />';

当您加载页面并将鼠标悬停在元素上时，它应将文本交换到新位置。请注意，您可能必须设置属性“value”而不是innerHTML。 YMMV。

让我们知道它是怎么回事。

：）

编辑：如果你试图关闭图像，就像让它消失以便提出“alt”文本一样，那就是操纵图像元素的CSS，理论上也可以是用javascript访问。干杯

编辑2：如果您试图让图像消失以便您可以看到alt文本，那么您也可以尝试使用javascript取消设置元素的源“src”属性，如果您已经定义了“alt”应该这样做。在那里，我想我对你所提出的问题有了所有可能的解释。

Answer 4

如果要动态添加图像，可以使用jQuery完成鼠标悬停：

var storedBg = null;
$('.textimage').live({ 
  mouseenter: function() {
    // Clear the background image and update the text
    storedBg = $(this).css('background-image');
    $(this).css('background-image', 'none');
    // update the text here
  },
  mouseleave: function() {
    // restore the background image
    $(this).css('background-image', storedBg );
  }
});

这有利于为将来通过AJAX调用加载的图像工作。

将鼠标悬停在图像上

4 个答案: