我正在尝试在Wordpress插件中集成Live HTML和CSS元素预览。
我想出的基本结构如下，但它不起作用，可能是js错误...
这是JS代码：
<script type="text/javascript">
$(function() {
function GetHtml(){
var html = $('.html').val();
return html;
}
function GetCss(){
var Css = $('.css').val();
return Css;
}
$('.innerbox').live("keyup",function(){
var targetp = $('#previewTarget')[0].contentWindow.document;
targetp.open();
targetp.close();
var html = GetHtml();
var css = GetCss();
$('body',targetp).append(html);
$('head', targetp).append('<style>' + css + '</style>');
});
});
</script>
以下是html代码。
<div id="mainWrapper">
<div id="box">
<textarea class="innerbox html"></textarea>
<textarea class="innerbox css"></textarea>
<div class="innerbox preview">
<iframe id="previewTarget">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<p>hey</p>
</body>
</html>
</iframe> …我有问题。当我将鼠标悬停在图像上时，会出现一个深色叠加层，但 CSS Transition 属性不起作用。
这是html：
<div class="col-md-12">
<div class="collection-category">
<img src="http://dummyimage.com/600x400/#C1C1C1/fff" />
<a href="#">
<div class="overlay_wrap">
<div class="overlay">
<h2 class="collection_title">Headline One</h2>
</div>
</div>
</a>
</div>
</div>
而 CSS 是：
.collection-category {
display: block;
overflow: hidden;
margin: 10px 0;
position: relative;
}
.collection-category img {
width: 100%;
max-height: 250px;
}
.collection_title {
display: table-cell;
vertical-align: middle;
font-size: 28px;
}
.overlay_wrap {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
-moz-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
-ms-transition: all …