Question

正如您在视频中看到的那样（链接贝娄）我有一个动画片，可以让鼠标移动图像。

它适用于所有浏览器，但我遇到了问题。

当我使用并点击“Informaciónrápida”然后关闭弹出窗口时，图像会消失，我只能看到属性的基本信息和空白区域。

关闭弹出窗口后，我会再次看到图像，鼠标结束时会看到基本信息。

我想知道我的代码是否有问题，或者Chrome和转换是否存在问题。

这仅适用于Chrome浏览器。

我的css文件中使用的代码是：

.ngm-thumb .mask {
  background-color: #fff;
  opacity: 1;
  -webkit-transform: translateY(206px);
  -moz-transform: translateY(206px);
  -o-transform: translateY(206px);
  -ms-transform: translateY(206px);
  transform: translateY(206px);
  transition: all 0.3s ease-in-out 0s;

我将html代码复制并粘贴到底部。

有什么想法吗？

我使用Chrome v.45.0.2454.101 m

如果您认为这是编码错误，是否有任何建议可以解决此问题？

视频链接：https://youtu.be/5Gp-0WpC_jQ

网站链接：http://www.quieroapartamento.com/es/

感谢您的帮助。

我在template.css中完整的CSS代码用于ngm-thumb类

.ngm-thumb {
  border: 1px solid #ebebeb;
  -webkit-box-shadow: 0 3px 3px #cccccc;
  -moz-box-shadow: 0 3px 3px #cccccc;
  box-shadow: 0 3px 3px #cccccc;
  float: left;
  height: 261px;
  overflow: hidden;
  position: relative;
  width: 100%;
  margin-bottom: 50px;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
}
.ngm-thumb .mask {
  height: 261px;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 100%;
}
.ngm-thumb a > img {
  border-bottom: 1px solid #ebebeb;
  display: block;
  position: relative;
  width: 100%;
}
.ngm-thumb .main {
  border-bottom: 1px solid #ebebeb;
  height: 55px;
}
.ngm-thumb .main h5 {
  display: inline-block;
  font-size: 14px;
  font-weight: bold;
  padding: 10px 0 0 20px;
  position: relative;
}
.ngm-thumb .main .price {
  border-color: -moz-use-text-color #ebebeb #ebebeb;
  border-style: none solid solid;
  border-width: medium 1px 1px;
  display: inline;
  float: right;
  font-size: 18px;
  font-weight: bold;
  height: 55px;
  padding: 6px 25px;
  background-color: rgba(90, 186, 198, 0.05);
  color: #75c5cf;
}
.ngm-thumb .main .price span {
  color: #979797;
  display: block;
  font-size: 11px;
  font-weight: normal;
  text-align: center;
}
.ngm-thumb .content {
  padding: 20px;
  position: relative;
  text-align: left;
}
.ngm-thumb .content button {
  margin-top: 5px;
}
.ngm-thumb .content p span {
  display: block;
  font-weight: bold;
}
.ngm-thumb .content i {
  padding-right: 5px;
}
.ngm-thumb img {
  transition: all 0.3s ease-in-out 0s;
}
.ngm-thumb .mask {
  background-color: #fff;
  opacity: 1;
  -webkit-transform: translateY(206px);
  -moz-transform: translateY(206px);
  -o-transform: translateY(206px);
  -ms-transform: translateY(206px);
  transform: translateY(206px);
  transition: all 0.3s ease-in-out 0s;
}
.ngm-thumb:hover .mask {
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  -o-transform: translateY(0px);
  -ms-transform: translateY(0px);
  transform: translateY(0px);
}
.ngm-thumb:hover a > img {
  -webkit-transform: translateY(-206px);
  -moz-transform: translateY(-206px);
  -o-transform: translateY(-206px);
  -ms-transform: translateY(-206px);
  transform: translateY(-206px);
}
@media (min-width: 992px) and (max-width: 1199px) {
  .ngm-thumb {
    font-size: 12px;
  }
  .ngm-thumb,
  .ngm-thumb .mask {
    width: 100%;
    height: 261px;
  }
  .ngm-thumb .main .price {
    padding: 10px;
    font-size: 12px;
    border-right: none;
  }
  .ngm-thumb .main,
  .ngm-thumb .main .price {
    height: 55px;
  }
  .ngm-thumb .mask {
    background-color: #fff;
    -webkit-transform: translateY(206px);
    -moz-transform: translateY(206px);
    -o-transform: translateY(206px);
    -ms-transform: translateY(206px);
    transform: translateY(206px);

这是我的HTML代码：

<patTemplate:tmpl name="pageoutput" unusedvars="strip">
{JOMRES_POPUPURL_GLOBALVAR}

<div title="{PROPERTY_NAME}" class="col-xs-12 col-sm-12 col-md-6 col-lg-4 appear" data-animated="flipInX" data-start="{ANIMATION_DELAY}">
    <div class="ngm-thumb">
        <a href="#module_{RANDOM_IDENTIFIER}_popup" data-toggle="modal" random_identifier="{RANDOM_IDENTIFIER}" property_name="{PROPERTY_NAME}" property_uid="{PROPERTY_UID}"><img src="{IMAGEMEDIUM}" alt="{PROPERTY_NAME}" title="{PROPERTY_NAME}" class="img-responsive" /></a>
        <div class="mask">
            <div class="main">
                <h5>{PROPERTY_NAME} {STARSIMAGES} {SUPERIOR}</h5>
                <div class="price">
                    {PRICE_PRICE} <span>{PRICE_POST_TEXT}</span>
                </div>
            </div>
            <div class="content">
                <p>{PROPERTY_STREET}, {PROPERTY_TOWN}, {PROPERTY_POSTCODE}, {PROPERTY_REGION}, {PROPERTY_COUNTRY}</p>
                <a href="#module_{RANDOM_IDENTIFIER}_popup" data-toggle="modal" random_identifier="{RANDOM_IDENTIFIER}" property_name="{PROPERTY_NAME}" property_uid="{PROPERTY_UID}" class="btn btn-info btn-block">{QUICKINFORMATION}</a>
                <a href="{MOREINFORMATIONLINK}" class="btn btn-primary btn-block" title="{PROPERTY_NAME}">{MOREINFORMATION}</a>
            </div>
        </div>
    </div>
</div>

<script>
   jomresJquery(document).ready(function(){
     jomresJquery('#module_{RANDOM_IDENTIFIER}_popup').appendTo("body");
    });
</script>

<div class="modal fade" id="module_{RANDOM_IDENTIFIER}_popup"></div>

</patTemplate:tmpl>

Chrome和Transform问题

0 个答案: