小编J82*_*J82的帖子

我创建了一个盒子,当它盘旋时会逐渐消失.这都是使用CSS3完成的.但是,我意识到的一个问题是,悬停在移动浏览器中不起作用.有没有办法以某种方式使这项工作移动或我不得不求助于使用某种JS？

编辑:为了澄清,我只是想能够点击框并让描述显示.我在其他网站上看过.这通常是怎么做的？:)

JS小提琴:http://jsfiddle.net/ygShH/4/

HTML

<article class="project">
     <div class="project-mask">
          <div class="thumbnail">
               <img src="http://dummyimage.com/292x292/000/fff" alt="desc" height="260" width="260">
               <div class="description">
                    <hgroup>
                         <h2>Title</h2>
                         <h3>Web</h3>
                    </hgroup>
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
                    <span>
                         <a href="http://site.com" target="_blank">Visit website</a>                                <a href="/view-project">View project</a>
                    </span>
               </div>
          </div>
     </div>
</article> …

看来这一行在statechange事件中:

$('#content').load(State.data.home_page);

...导致同一页面加载多次,导致我的网站出现故障.我该怎么做才能解决这个问题？

(function($) {

    function loadHome() {
        $('#content').load(site.url + '/ #primary', function() {
            $(this).fadeIn(50);
        });
    }

    // User event
    $('.site-title a').on('click', function(e) {
        e.preventDefault();

        var newData = { home_page: site.url + '/ #primary' };
        History.pushState(newData, site.title, site.url);
        loadHome();
    });

    // History event
    History.Adapter.bind(window, 'statechange', function(){
        var State = History.getState();
        $('#content').load(State.data.home_page);
    });

})(jQuery);

更新

好的,所以我学到了.pushState实际的电话statechange.

所以基本上,我在想这就是发生的事情:

• 用户点击 .site-title a
• pushState()调用哪些调用statechange加载页面的一部分.
• 同时,loadHome()也称为加载相同的.

我可以看到这就是为什么我得到同一页面的多个实例.我以为statechange只有当用户点击浏览器上的后退按钮时才会调用.这样可以解决问题,但我仍然不知道如何向前推进.假设这是罪魁祸首,我不知道.load在这个statechange事件中用什么代替那条线.

我在网站上使用Gray作为一些元素.但是,我无法让它在IE11中运行.例如,在下面的小提琴中,我使用JS来添加grayscale和grayscale-fade类,以便在悬停时图像从颜色渐变为灰度.我如何在IE11中使用它？作者说,插件需要为IE11初始化(即$('article.project img').gray();),但如果我添加该行,所有图像默认从一开始就变为灰色.我只是想在IE11中使用它.有人能告诉我怎么样？

小提琴:http://jsfiddle.net/61jcam54/

HTML

<div id="content">
    <article class="project">
        <img width="375" height="375" src="http://i.imgur.com/jNkpAg6.gif" alt="image-title">
        <div class="overlay" style="margin-left: -1px; width: 367px;">
            <h3>Project Title</h3>
            <a class="post-link expand" href="http://google.com">+</a>
        </div>
    </article>
</div>

CSS

article.project {
  float: left;
  margin: 0 1% 2%;
  max-width: 375px;
  overflow: hidden;
  position: relative;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
}

article.project img {
  display: block;
  margin: 0;
  padding: 0;
  max-width: 100%;
  height: auto;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all …

我注意到我在我的网站上的控制台中收到以下错误.

错误:语法错误,无法识别的表达式:unsupported pseudo:hover @ /wp-includes/js/jquery/jquery.js?ver=1.8.3:2

我发现错误是由于我的一个js文件中的这一行:

if(qactive == 0 && !($('#slider').is(":hover"))) {

我可以用什么替代方法来写这条线以使错误消失？

我想用CSS创建它.这可能吗？如果是这样,你们可以帮助我吗？

我使用图像/ Photoshop已有很长时间了，从来没有遇到过这个问题。基本上，我尝试将一些图像上传到WordPress，它们看起来像这样：

如您所见，以绿色突出显示的那一个很好。但是，由于某种原因，另外两个看上去好像处于CMYK模式。图像是RGB并保存在网络上，所以我不确定可能是什么问题。谁能帮我理解这一点？

这是其中一张出现错误的图像的文件（这很奇怪，因为它在此处显示得很好，也许严格来说是WordPress问题？）：

我想在整个容器的左侧和右侧创建一个响应式 4x4正方形网格,边距恰好为20px.此外,这将有效地消除每行中第一个方块上的左边距,并且还消除了每行中最后一个方格的右边距,因为不需要双边距.

绿色表示每侧20px的边距.

到目前为止,我已经创建了百分比的正方形网格,但问题在于,由于我在每个正方形的所有边都应用了边距,因此这种方法不能保证每个20px的左右边距(在容器上).

小提琴:http://jsfiddle.net/p9qdhfub/1/

HTML

<section>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</section>

CSS

div {
    background: #000;
    float: left;
    height: 24vw;
    margin: 1%;
    width: 23%;
}

题

我怎么能用容器(即section)始终具有margin-left20px和margin-right20px的一个4x4响应方块网格？

在我的网站上,这些框应该淡入描述中.这适用于我尝试过的每个浏览器,除了IE10.这是一个WordPress网站,我使用九个插件.我已经尝试停用所有插件但徘徊仍然无法在IE10中运行.

下面是我用于悬停的代码:

jQuery(document).ready(function($){

$('.thumbnail').hover(function() {
  $('img', this).stop(true,true).fadeTo(100, 0.1);
  $('.description', this).stop(true,true).fadeIn(100);
}, function() {
  $('img', this).stop(true,true).fadeTo(100, 1);
  $('.description', this).stop(true,true).fadeOut(100);
});

});

有人可以帮我识别问题吗？如果我遗漏了任何重要信息,请告诉我.谢谢.

编辑:过滤/悬停的整个代码.

  // Filter
  $(function() {

    var time_effect = 1000;
    var effect_name = 'easeOutQuart';

    $('.all').quicksand( $('.everything article'), {
        duration: time_effect,
        attribute: 'data-id',
        easing: effect_name,
        adjustHeight: 'auto',
        useScaling: false
      }, function() { // callback function
            $("a.single-image").fancybox({
                'transitionIn'   : 'elastic',
                'transitionOut'  : 'fade',
                'overlayColor'   : '#000',
                'overlayOpacity' : '0.6'
            });
            $(document.body)
                .on('mouseenter', '.thumbnail', function() {
                    $('img', this).stop(true,true).fadeTo(600, 0);
                    $('.description', this).stop(true,true).fadeIn(600);
                })
                .on('mouseleave', …

我正在尝试使用jQuery在选项卡内安排选项卡。以下是我正在使用的HTML，CSS和JS。如何在其中插入几个标签#tab2？

的HTML

<ul class="tabs">
  <li><a href="#tab1">Podcasts</a></li>
  <li><a href="#tab2">Videos</a></li>
</ul>
<div id="tab1" class="tab_content">
  <p>test</p>
</div>
<div id="tab2" class="tab_content">
  <div id="tab2-1">                      <-- Tab 2-1 inside of #tab2
    <p>test</p>
  </div>
  <div id="tab2-2">                      <-- Tab 2-2 inside of #tab2
    <p>test</p>
  </div>
</div>

的CSS

.tab_content { background:#fff;padding:10px;width:100% }
.tabs li { display:inline;list-style:none }
.tabs a { background:#7c7c7c;color:#dadada;display:inline-block }
.tabs a.active { background:#e32d2d;color:#fff }

JS

jQuery('ul.tabs').each(function(){
    // For each set of tabs, we want to keep track of
    // which tab is active and …

这就是我的意思:

我想从包含框中放入2px的边框.这只能使用CSS吗？