Question

我正在努力在wordpress网站上实现动画。我使用divi主题，我已经用CSS，HTML和JQuery完成了动画。我所做的是将JQuery嵌入到代码模块中，将css添加到模型中并将HTML插入到文本模块中，但它似乎不起作用。

这是我的代码：

    <style type="text/html">
<div id="infographic">
  <div id="c1">
    <h3>Strategy</h3>
    <p>Strategy <br><br>All companies can get stuck. <br>Whether you have been at it for years or only just trying to get started. <br>Osocon can assist you in rebooting your strategy. We can also help you<br> draw up the plan to deliver on it. Our pragmatic approach is rooted in years<br> of personal experience across a range of industries, geographies, and scale.<br>We help you to focus on what matters the most.<br><br> Within strategy more specifically we can:<br><br>- Help you to get direction and traction on new projects or start-up initiatives<br>- Acid test your existing (or new) business ideas and growth opportunities<br>- Prioritize what to do and when to do it in order to get the business on track <br>- Review your commercial identity, organization, skills and approach</p>
  </div>
  <div id="c2">
    <h3>Leadership</h3>
    <p>Leadership <br><br>Your teams need to be ready to deliver on your plan. Are they?<br> The approach your leadership teams take are crucial determinants of your success. <br>Osocon believes in balancing the personal traits and the business skills of a leader.<br> We can help you to get an unbiased view across your organization.<br> Something truly challenging when you are right in the midst of it<br><br>Within leadership more specifically we can:<br><br>- Assess the ability of your organization and leadership to deliver on the strategic plan<br>- Gauge the effectiveness of your leadership and how your organization works together<br>- Coach you and your leadership team towards greater and sustainable impact<br>- Provide an objective opinion on the current leadership skills and approaches</p>
  </div>
  <div id="c3">
    <h3>Ownership</h3>
    <p>Ownership <br><br>Unsurprisingly, having the right owners of your company is important. <br>Sometimes we forget to adjust our ownership structure as our needs<br> change over time. Some bring in new investors too early, some refuse<br> to even when it is the best option. Osocon can assist you in ensuring <br>the right longer-term environment and structure is in place for your<br> company’s success.<br><br> Within ownership more specifically we can: <br><br> -Be your sparring partner for your current ownership structure and investor considerations<br>- Prepare you for an investment process, identify investors, and ‘get your house in order’<br>- Take Board positions or Advisory roles in your company when this makes sense<br>- Actively invest in your company where the fit is good, and the timing is right</p>
  </div>
</div>
</style>
<style type="text/css">

@import "compass/css3";

html {
  background: white;
  text-align: left;
  padding-top: 2em;
  padding-left: 3em;
}

#infographic {
  margin: 0 auto;
  position: absolute;
  display: block;
  height: 10em;
  width: 10em;
 &:hover {
    cursor: pointer; 
  }
 div {
    @include transition(all 600ms cubic-bezier(0.23, 1, 0.32, 1));
    height: 14em;
    width: 14em;
    position: absolute;
    border-radius: 50%;
    background: rgba(242,242,242,0.6);
    background-blend-mode: multiply;
    &:hover {
    cursor: pointer;
   transition: background-color 800ms ease-in-out;
  background: rgb(34,181,115);
  color: rgba(255,255,255,0);
  z-index: 999;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
   }  
  } 
}

h3 {
  font-family: Arial;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0.1em;
  margin-top: 50%;
  text-transform: uppercase;
  color: #22B573;
  text-align: center;

}
#c1:hover h3, #c2:hover h3, #c3:hover h3{
  font-family: Arial;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0.1em;
  margin-top: 50%;
  text-transform: uppercase;
  color: white;
  text-align: center;

}

p {
  font-family: Arial;
  font-size: 12px;
  font-weight: Normal;
  letter-spacing: 0.1em;
  color: black;
}

#c1 {
  top: 0em;
  left: 60%;
}

#c2 {
  top: 100%;
  left: 0;
}

#c3 {
  top: 100%;
  left: 110%;
}

.animated {
  #c1 {
    @include transform(translate(0em, 0.1em));
    &:hover p{
    display:block;
    white-space: nowrap;
    margin-left: 180%;
    margin-top: -8em;
  }
  }
  #c2 {
@include transform(translate(0em, 0.1em));
   &:hover p{
    display: block;
    white-space: nowrap;
    margin-left: 223%;
    margin-top: -21.3em;

  }
  }
  #c3 {
    @include transform(translate(0em, 0.1em));
  &:hover p{
  display: block;
  white-space: nowrap;
  margin-left: 145%;
  margin-top: -21.3em;

  }

  }
}

p {
display: none;  
}
</style>

<script type="text/javascript">


$(document).ready(function() {
  $("#infographic").hover(function() {
    $("#infographic").toggleClass("animated");
  });
});

</style>

有什么建议吗？

BR Anne-Sophie！

如何在我的Divi主题（wordpress）中嵌入css，jquery和html

0 个答案: