Javascript 添加第二个onmouseover操作_Javascript_Php_Jquery

Javascript 添加第二个onmouseover操作

javascript php jquery

Javascript 添加第二个onmouseover操作,javascript,php,jquery,Javascript,Php,Jquery,我有以下脚本： <?php $main_image = get_field('main_image'); $hover_image = get_field('hover_image'); $button_text = get_field('button_text'); ?> <img src="<?php echo $main_image; ?>" onmouseover="this.src='<?php echo $hover_image; ?&g

我有以下脚本：

<?php
$main_image  = get_field('main_image');
$hover_image  = get_field('hover_image');
$button_text  = get_field('button_text');
?>


<img src="<?php echo $main_image; ?>"
onmouseover="this.src='<?php echo $hover_image; ?>'" 
onmouseout="this.src='<?php echo $main_image; ?>'" />


"
onmouseover=“this.src=”“
onmouseout=“this.src=“””/>

如何在鼠标上方显示

谢谢！

每当鼠标悬停事件运行时，您可以使用img标记的title属性来显示$button\u文本值。 e、 g

“title=”
onmouseover=“this.src=”“
onmouseout=“this.src=“””/>

如果你想以不同的方式显示按钮文本，那么也让我知道你想如何显示？所以我也可以帮你。


<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
    position: relative;
    width: 50%;
}

.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.container:hover .image {
  opacity: 0.3;
}

.container:hover .middle {
  opacity: 1;
}

.text {
  background-color: #4CAF50;
  color: white;
  font-size: 16px;
  padding: 16px 32px;
}
</style>
</head>
<body>

<h2>Opacity with Box</h2>
<p>Hover over the image to see the effect.</p>

<div class="container">
  <img src="img_avatar.png" alt="Avatar" class="image" style="width:100%">
  <div class="middle">
    <div class="text">John Doe</div>
  </div>
</div>

</body>
</html>

.集装箱{
位置：相对位置；
宽度：50%；
}
.形象{
不透明度：1；
显示：块；
宽度：100%；
高度：自动；
过渡：放松；
背面可见性：隐藏；
}
.中{
过渡：放松；
不透明度：0；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
文本对齐：居中；
}
.container:hover.image{
不透明度：0.3；
}
.容器：悬停。中间{
不透明度：1；
}
.文本{
背景色：#4CAF50；
颜色：白色；
字体大小：16px；
填充：16px 32px；
}
带方框的不透明度
将鼠标悬停在图像上以查看效果
无名氏

我已经提供了一个与您的需求相关的示例，请检查这个示例，并告诉我您是否还有任何问题。

有什么想法吗，伙计们？使用Javascript的addEventListener方法，而不是在HTML上放置内联事件处理程序。然后，您可以为同一事件添加任意数量的处理程序。很多在线文档和教程，只是四处搜索。或者，让你的onmouseover执行一个函数，它可以执行多个命令来做你想做的所有事情。对不起，我的js知识不是那么广博。所以我根本不知道如何以这种方式做到这一点；（谢谢你，伙计！不幸的是，我觉得这个标题不是我要找的。我只是想在鼠标上方交换图像，然后用这个文本显示按钮（覆盖）。你不知道怎么用这种方式吗？

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
    position: relative;
    width: 50%;
}

.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.container:hover .image {
  opacity: 0.3;
}

.container:hover .middle {
  opacity: 1;
}

.text {
  background-color: #4CAF50;
  color: white;
  font-size: 16px;
  padding: 16px 32px;
}
</style>
</head>
<body>

<h2>Opacity with Box</h2>
<p>Hover over the image to see the effect.</p>

<div class="container">
  <img src="img_avatar.png" alt="Avatar" class="image" style="width:100%">
  <div class="middle">
    <div class="text">John Doe</div>
  </div>
</div>

</body>
</html>