文本悬停到多列图像，固定图像居中

问题描述

我一直在为一个我知道合适的人可以轻松解决的问题而苦苦挣扎。

我需要创建类似于此站点的内容：

http://www.arcadiacontemporary.com/artists/index.php

但是我需要像这个站点这样的多个艺术家列/表：

https://collinsgalleries.com/ARTISTS5.html

我希望鼠标悬停的工作方式相同，但是当它抓取图像时，我宁愿能够使用外部文件和 URL，而不是内部。

两个站点都使用 jquery 和 bootstrap，我需要将它们集成到 Wordpress 网站中。我不知道 jquery 或 bootstrap js，所以我正在尽力创建它。

到目前为止，我对代码的最佳理解是：

HTML

<!DOCTYPE html>
<html>
<head>

<style>
table,th,td {
  border: 0px solid black;
    padding: 5px;

}
table {
  border-spacing: 15px;
  ]
    </style>
    </head>
    <body>
        
 <a href="#"><div class="hover-img">
  <table style="width: 100%"></table>
  <th>Artist Name</th>
  </tr>
   <span><img src="https://collinsgalleries.com/images/Artist-Page-Monks.jpg" alt="image" height="fixed" />      </span>
</div></a>
<a href="#"><div class="hover-img">
    <tr>
    
    <th>Artist Name</td>
   <span><img src="https://collinsgalleries.com/images/Paul_Oxborough_Old_Friends.jpg" alt="image" height="fixed" />      </span>
</div></a>
 <a href="#"><div class="hover-img">
    <td>Artist Name</td>
   <span><img src="https://collinsgalleries.com/images/Paul_Oxborough_Beds.jpg" alt="image" height="fixed" />      </span>
</div>
</a>
 <a href="#"><div class="hover-img">
    <td>Artist Name</td>
   <span><img src="https://collinsgalleries.com/images/Paul_Oxborough_MacBeth-frame.jpg" alt="image" height="fixed" />      </span>
   


   </table>
   
   </body>
</html>

然后是 CSS

a .hover-img { 
  position:static;
 }
a .hover-img span {
  position:absolute; left:-9999px; top:-9999px; z-index:9999;
 }
a:hover .hover-img span { 
  top: 1vw; 
  left:18vw;
 }
 
 
 
td {
  display: table-cell;
  vertical-align: inherit;
}

此代码的问题是 - 中间的图像大小不同。如果我添加第三行格式会中断。而且这也需要移动响应。

我愿意接受所有建议。提前致谢

解决方法

好的，首先，您使用 bootstrap 的原因是它可以满足移动和桌面屏幕尺寸的需求，而无需运行任何额外的样板代码来为浏览器调整站点大小...

jquery 不是实现你的目标所必需的，但纯原生 JavaScript 是。

这就是我的处理方式

在第一个实例中，我会用一个名为 flex box 的布局替换 table 组件这将使您的代码更易于阅读并且将动态布局...如果您想进一步阅读 flex box CSS 样式这是链接 Flex Box
第二件事是我将编写一个简单的 JavaScript 函数来更改 onMouseOver 的图像。为了给 JavaScript 引擎一个处理 DOM 图像组件的句柄，您需要为其分配和“id”。然后你可以使用let ObjName = document.getElementById('YourHtmlObject')。之后你可以用JS操作它
我会使用一个图像容器，并通过 JavaScript 函数中的 switch 语句根据艺术家动态附加图像源
为了让图像再次在鼠标悬停时缩放或缩放，我只需放置一个 CSS 动画来做到这一点

Vanilla JavaScript 在你的情况下会让你的生活变得更简单。学习它的基础知识是个好主意……我提供了一些代码，可以为您简化解决方案……如果您觉得这有用或需要任何进一步的帮助，请告诉我

享受吧！

function ChangeImage(artistName) {


  let img = document.getElementById('TheImage');

  switch (artistName) {

    case 'Rob':
      // code block
      img.src = 'https://collinsgalleries.com/images/Paul_Oxborough_Old_Friends.jpg';
      break;
    case 'Amy':
      // code block
      img.src = 'https://collinsgalleries.com/images/Paul_Oxborough_Beds.jpg';
      break;
    case 'Bob':
      // code block
      img.src = 'https://collinsgalleries.com/images/Paul_Oxborough_MacBeth-frame.jpg';
      break;
    case 'Clare':
      // code block
      img.src = 'https://collinsgalleries.com/images/Artist-Page-Monks.jpg';
      break;
    default:
      // code block
      img.src = 'https://collinsgalleries.com/images/Artist-Page-Monks.jpg';

  }

}

.app-container {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

.leftcontainer {
  flex-direction: column;
  justify-content: space-evenly;
}

.rightcontainer {
  flex-direction: column;
  justify-content: space-evenly;
}

.midcontainer {
  flex-direction: column;
  justify-content: space-evenly;
}

.zoom {
  transition: transform .2s;
  /* Animation */
}

.zoom:hover {
  transform: scale(1.5);
  /* (150% zoom - Note: if the zoom is too large,it will go outside of the viewport) */
  /* position:absolute;
      right:0;*/
}

#TheImage {
  transition: transform .2s;
}

<div class="app-container">


  <div class="leftcontainer">

    <div class="app-container">

      <ul style="list-style: none;">
        <li onmouseover="ChangeImage('Rob')">Rob</li>
        <li onmouseover="ChangeImage('Amy')">Amy</li>
        <li onmouseover="ChangeImage('Bob')">Bob</li>
        <li onmouseover="ChangeImage('clare')">Clare</li>
      </ul>


      <ul style="list-style: none;">
        <li onmouseover="ChangeImage('Rob')">Rob</li>
        <li onmouseover="ChangeImage('Amy')">Amy</li>
        <li onmouseover="ChangeImage('Bob')">Bob</li>
        <li onmouseover="ChangeImage('clare')">Clare</li>
      </ul>

    </div>
  </div>

  <div class="midcontainer">
    <span><img id='TheImage'  class='zoom'  src="https://collinsgalleries.com/images/Artist-Page-Monks.jpg" alt="image" height="300px"  width="300px"/>      </span>
  </div>

  <div class="rightcontainer">
    <div class="app-container">
      <ul style="list-style: none;">
        <li onmouseover="ChangeImage('Rob')">Rob</li>
        <li onmouseover="ChangeImage('Amy')">Amy</li>
        <li onmouseover="ChangeImage('Bob')">Bob</li>
        <li onmouseover="ChangeImage('clare')">Clare</li>
      </ul>
      <ul style="list-style: none;">
        <li onmouseover="ChangeImage('Rob')">Rob</li>
        <li onmouseover="ChangeImage('Amy')">Amy</li>
        <li onmouseover="ChangeImage('Bob')">Bob</li>
        <li onmouseover="ChangeImage('clare')">Clare</li>
      </ul>
    </div>
  </div>

</div>

hover image javascript onmouseover

文本悬停到多列图像，固定图像居中 - 鼠标悬停

问题描述

解决方法

相关问答