Question

我一直在尝试在代码段中包含javascript，但它无效。我试图在jsFiddle中包含我的脚本，但结果相同。虽然，它在我当地工作正常。

预期结果：如js中所述，元素的高度应在悬停时更改。图像的高度应与阅读按钮的底部相同。以下是相同的图像。

我还包括我的html文件，因为这是工作代码。

有人可以指导我做错了吗，下面是我想要包含的内容（我正在使用该片段的默认设置）

注意：请不要告诉我在meta here上询问它是我的问题的元链接，那边的人建议我提出这个问题这里。

function changeHeight(x) {
  document.getElementById('parentDiv').style.height = x.clientHeight;
  document.getElementById('topic').style.height = x.clientHeight;
  document.getElementById('hot-topic').style.height = x.clientHeight + 67;

}

#section1 > .wrapper {
  /* Text */
  text-align: justify;
}
.hot-topic {
  /* Text */
  font-family: "Lato", "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
  line-height: 1.5;
  font-size: 15px;
  font-weight: 400;
  /* Dimensions */
  width: 282px;
  height: 226px;
  /* Positioning */
  position: relative;
  margin-top: 50px;
  /* Styling */
  background-color: #2f2f31;
  border: 5px solid #2f2f31;
  border-radius: 2px;
  box-shadow: 2px 2px 3px;
}
.hot-topic > h3 {
  /* Text */
  color: #999999;
  font-size: 1.0rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  /* Positioning */
  margin: 5% 0 2% 3%;
  overflow: hidden;
  /* Visibility */
  display: block;
}
.topic {
  /* Dimensions */
  width: 282px;
  height: 159px;
  /* Styling */
  background-color: white;
  background-image: url(http://www.bhphotovideo.com/images/images2500x2500/HP_Hewlett_Packard_BV701AA_ABA_Pavilion_Slimline_s5_1010_Desktop_793042.jpg);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.topic:hover {
  /* Styling */
  -webkit-filter: blur(1px);
  -moz-filter: blur(1px);
  -ms-filter: blur(1px);
  -o-filter: blur(1px);
  filter: blur(1px);
}
.topic:hover + .caption {
  display: block;
}
.caption {
  /* Text */
  color: #bbbbbb;
  font-size: 0.8rem;
  text-align: center;
  /* Dimensions */
  width: 265px;
  height: inherit;
  /* Positioning */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0% 3% 0 3%;
  /* Visibility */
  display: none;
  /* Styling */
  background: rgba(0, 0, 0, .8);
}
.caption:hover {
  /* Visibility */
  display: block;
}
.caption-wrapper {
  /* Text */
  text-align: justify;
}
.button {
  /* Text */
  color: #bbbbbb;
  /* Positioning */
  position: relative;
  padding: 5px 10px;
  /* Styling */
  background-color: transparent;
  border: 1px solid #bbbbbb;
  outline: none;
  /* Transitions */
  -webkit-transition: background-color .5s ease, color .5s ease;
}
.button:hover {
  /* Text */
  color: #0c0c0c;
  /* Styling */
  cursor: pointer;
  background-color: #bbbbbb;
  /* Transitions */
  -webkit-transition: background-color .5s ease, color .5s ease;
}

<div id="hot-topic" class="hot-topic">
  <div id="parentDiv">
    <div id="topic" class="topic">
    </div>
    <div id="caption" class="caption" onmouseover="changeHeight(this)">
      <div class="caption-wrapper">
        <p>This HP Pavilion Slimline S5 1010, one of of the best machines Hewllett Packard has to offer.This HP Pavilion Slimline S5 1010, one of of the best machines Hewllett Packard has to offer.
          <br/>
          <br/>It has a 3.2GHz Intel Pentium E6700 CPU and a 750GB 7200rpm Hard Drive.</p>
      </div>
      <button class="button">Read More</button>
    </div>
  </div>
  <h3>HP Pavilion Slimline S5 1010</h3>
</div>

HTML文件

    <html>
     <head>
    <style>
      #section1 > .wrapper {
        /* Text */
        text-align: justify;
      }
      .hot-topic {
        /* Text */
        font-family: "Lato", "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
        line-height: 1.5;
        font-size: 15px;
        font-weight: 400;
        /* Dimensions */
        width: 282px;
        height: 226px;
        /* Positioning */
        position: relative;
        margin-top: 50px;
        /* Styling */
        background-color: #2f2f31;
        border: 5px solid #2f2f31;
        border-radius: 2px;
        box-shadow: 2px 2px 3px;
      }
      .hot-topic > h3 {
        /* Text */
        color: #999999;
        font-size: 1.0rem;
        line-height: 1.2;
        text-overflow: ellipsis;
        /* Positioning */
        margin: 5% 0 2% 3%;
        overflow: hidden;
        /* Visibility */
        display: block;
      }
      .topic {
        /* Dimensions */
        width: 282px;
        height: 159px;
        /* Styling */
        background-color: white;
        background-image: url(http://www.bhphotovideo.com/images/images2500x2500/HP_Hewlett_Packard_BV701AA_ABA_Pavilion_Slimline_s5_1010_Desktop_793042.jpg);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
      }
      .topic:hover {
        /* Styling */
        -webkit-filter: blur(1px);
        -moz-filter: blur(1px);
        -ms-filter: blur(1px);
        -o-filter: blur(1px);
        filter: blur(1px);
      }
      .topic:hover + .caption {
        display: block;
      }
      .caption {
        /* Text */
        color: #bbbbbb;
        font-size: 0.8rem;
        text-align: center;
        /* Dimensions */
        width: 265px;
        height: inherit;
        /* Positioning */
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 0% 3% 0 3%;
        /* Visibility */
        display: none;
        /* Styling */
        background: rgba(0, 0, 0, .8);
      }
      .caption:hover {
        /* Visibility */
        display: block;
      }
      .caption-wrapper {
        /* Text */
        text-align: justify;
      }
      .button {
        /* Text */
        color: #bbbbbb;
        /* Positioning */
        position: relative;
        padding: 5px 10px;
        /* Styling */
        background-color: transparent;
        border: 1px solid #bbbbbb;
        outline: none;
        /* Transitions */
        -webkit-transition: background-color .5s ease, color .5s ease;
      }
      .button:hover {
        /* Text */
        color: #0c0c0c;
        /* Styling */
        cursor: pointer;
        background-color: #bbbbbb;
        /* Transitions */
        -webkit-transition: background-color .5s ease, color .5s ease;
      }

    </style>
  </head>
  <body>
    <div id="hot-topic" class="hot-topic">
      <div id="parentDiv">
        <div id="topic" class="topic">
        </div>
        <div id="caption" class="caption" onmouseover="changeHeight(this)">
          <div class="caption-wrapper">
            <p>This HP Pavilion Slimline S5 1010, one of of the best machines Hewllett Packard has to offer.This HP Pavilion Slimline S5 1010, one of of the best machines Hewllett Packard has to offer.
              <br/>
              <br/>It has a 3.2GHz Intel Pentium E6700 CPU and a 750GB 7200rpm Hard Drive.</p>
          </div>
          <button class="button">Read More</button>
        </div>
      </div>
      <h3>HP Pavilion Slimline S5 1010</h3>
    </div>
    <script>
      function changeHeight(x){
        document.getElementById('parentDiv').style.height=x.clientHeight;
        document.getElementById('topic').style.height=x.clientHeight;
        document.getElementById('hot-topic').style.height=x.clientHeight+67;

      }
    </script>
  </body>
</html>

如何在片段中使用js

0 个答案: