如何解决文本悬停到多列图像,固定图像居中 - 鼠标悬停
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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。