【发布时间】：2020-06-23 08:59:05
【问题描述】：
当您访问 thedaystaragency.com/home 并向下滚动到我们的服务时，灯泡所在的位置全部错位且无法正常工作。这是我正在使用的代码，我现在删除了按钮，因为由于某种原因 elementor 不允许按钮正常工作，如果可以推荐任何解决方案，我将不胜感激！ :)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Change Image on Hover in CSS</title>
<style>
#myBtn{
padding: 15px 25px;
font-size: 24px;
text-align: center;
cursor: pointer;
outline: none;
color: #fff;
background-color: #4CAF50;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
}
#lightbulb:hover img{
content:url("https://thedaystaragency.com/wp-content/uploads/2020/03/rsz_11logomakr_2srycx.png");
}
#lightbulb:hover p { font-weight:bold; }
}
</style>
</head>
<body>
<center>
<div id=lightbulb >
<img src="https://thedaystaragency.com/wp-content/uploads/2020/03/rsz_4rsz_logomakr_3ijkr2.png" onmouseover=this.src="https://thedaystaragency.com/wp-content/uploads/2020/03/rsz_11logomakr_2srycx.png" onmouseout=this.src="https://thedaystaragency.com/wp-content/uploads/2020/03/rsz_4rsz_logomakr_3ijkr2.png" width=25px;> <br> <br> <h2> hi</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span id="dots">...</span><span id="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>}
对于我试图做这样的事情的按钮：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#more {display: none;}
</style>
</head>
<body>
<h2>Read More Read Less Button</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span id="dots">...</span><span id="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button onclick="myFunction()" id="myBtn">Read more</button>
<script>
function myFunction() {
var dots = document.getElementById("dots");
var moreText = document.getElementById("more");
var btnText = document.getElementById("myBtn");
if (dots.style.display === "none") {
dots.style.display = "inline";
btnText.innerHTML = "Read more";
moreText.style.display = "none";
} else {
dots.style.display = "none";
btnText.innerHTML = "Read less";
moreText.style.display = "inline";
}
}
</script>
</body>
</html>【问题讨论】：
-
实际行为与预期行为是什么？ （我真的不明白“都未对齐并且无法正常工作”）
-
请告诉人们您有什么错误，以及您已经尝试过什么。这可以让人们更好地帮助您。
标签： javascript html css wordpress elementor