Question

我有一个有趣的问题，想知道是否有人可以帮我解决问题;

我想知道是否可以在wordpress中创建一个能够执行以下操作的功能;

如果我上传图片并将其包装在课堂中，比如说＆＃39;功能＆＃39;，并将其链接到wordpress页面，是否可以创建一个功能，当图像悬停时它会改变带有颜色的图像并覆盖链接页面的标题？甚至是已设定的图像标题？

接下来我发现了这个片段;

$(function() {

$("img[class^='imglink']").each(function(){
    var imgTitle = $(this).attr('title');
    $(this).wrap('<div class="overlay-container"></div>');
    $(this).after('<div class="overlay">'+imgTitle+'</div>');

});
});

但是任何想法如何在Wordpress中实现它;在谈到这一点时我是一个新手;

感谢

任何帮助或想法都会很棒

Answer 1

您的问题相当广泛，但您可以仅使用CSS执行此操作，无需使用Javascript。这是让你入门的东西：

.feature {
  height:250px;
  width:250px;
  background:url('http://placehold.it/250x250');
  position:relative;
}
  .feature:hover {
    background:red;
  }
    .feature:hover .title {
      display:block;
    }
.title {
  width:100%;
  text-align:center;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  display:none;
}

<div class="feature">
    <div class="title">Example Title</div>
</div>

悬停图像时标题叠加

1 个答案: