Elementor Question posted in
A comprehensive tutorial library can be found here.

Elementor – HTML Elements on webpage are displaying wrong

When you go to thedaystaragency.com/home and scroll down to our services where the lightbulbs are they are all misaligned and aren’t working properly. This is the code I’m using, I removed the button for now because for some reason elementor doesn’t allow the button to function properly, if any solutions could be recommended I would truly appreciate it! đŸ™‚

<!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>

}

For button im trying to do something like this: 

<!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>
Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    Actually I tried this solution and it seemed to work thanks to your insight!

    `enter code here`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Change Image on Hover in CSS</title>
<style>

#gears:hover img{
    content:url("https://thedaystaragency.com/wp-content/uploads/2020/03/LogoMakr_5dF3BF.png");
}
#gears img { padding-bottom:15px;
}

  #gears p{ font-family:raleway;
  font-size:15px;
  font-weight:400;
  }
  
  #gears h2{ font-family:raleway;
  font-size:20px;
    font-weight:400;
  }

  
  #gears:hover h2{ color:#04A4CC; }
}


</style>
</head>
<body>
    <br>
    <center>
    <div id=gears >
 <img src="https://thedaystaragency.com/wp-content/uploads/2020/03/LogoMakr_5i5JYt.png" onmouseover=this.src="https://thedaystaragency.com/wp-content/uploads/2020/03/LogoMakr_5dF3BF.png" onmouseout=this.src="https://thedaystaragency.com/wp-content/uploads/2020/03/LogoMakr_5i5JYt.png" wwidth=45px; <br> <br> <h2> OPERATIONAL CONTROLS</h2> <p>At Cannabrand, we like to make sure you are profitable at every stage of the production process. We focus on process re-engineering. <br>
 [expand title="Read More" swaptitle="Close" trigpos="below" trigclass="my_button"]
 We streamline business' supply-side activities to maximize customer value and gain competitive advantage in an increasingly competitive marketplace. Cannabrand’s operations experts will help streamline and structure production, product development, and information systems needed to decrease costs, increase efficiency, and increase the velocity of money flowing through the company. By managing the overall supply chain, we help our partners to increase and maintain a competitive advantage. [/expand]</p> <br>


  2. 0

    Not sure what you aim to do, but the misalignment comes from the last light bulb div not being wrapt in the same div structure as the first three ones.

    Login or Signup to reply.
  3. 0

    I’d recommend you to avoid switching whole paragraph to bold text. You could use something like this maybe:

    <!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 { 
  box-shadow: -26px 10px 37px -4px rgba(220,220,220,1);
  background-color: rgba(204, 245, 245, 0.5);
}

.text {
  box-sizing: border-box;
  padding: 5px;
  text-align: justify;
  transition-duration: 700ms;

}

</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 class="text">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.</p>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search