More compact code



  • $('.news-block_main').hover(
      function() {
        $('.news-block-hover_main').show('fast');
      },
      function() {
        $('.news-block-hover_main').hide('fast');
      }
    );
    $('.news-block_2').hover(
      function() {
        $('.news-block-hover_2').show('fast');
      },
      function() {
        $('.news-block-hover_2').hide('fast');
      }
    );
    $('.news-block_3').hover(
      function() {
        $('.news-block-hover_3').show('fast');
      },
      function() {
        $('.news-block-hover_3').hide('fast');
      }
    );
    $('.news-block_4').hover(
      function() {
        $('.news-block-hover_4').show('fast');
      },
      function() {
        $('.news-block-hover_4').hide('fast');
      }
    );
    $('.news-block_5').hover(
      function() {
        $('.news-block-hover_5').show('fast');
      },
      function() {
        $('.news-block-hover_5').hide('fast');
      }
    );
    $('.news-block_6').hover(
      function() {
        $('.news-block-hover_6').show('fast');
      },
      function() {
        $('.news-block-hover_6').hide('fast');
      }
    );
    .news-blocks {
      max-width: 1210px;
      margin: 0 auto;
    }
    .news-list {
      position: relative;
      height: 676px;
      margin-top: 10px;
    }
    .anews {
      position: absolute;
      top: 0;
      left: 0;
      width: 33.33%;
      height: 33.33%;
    }
    .news-block {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background-color: #555;
      background-position: center center;
      background-size: cover;
      overflow: hidden;
    }
    .news-block:hover h2 {
      color: #000;
    }
    .news-block h2 {
      font-size: 24px;
      font-family: ProximaBold;
      line-height: 1.2em;
    }
    .news-block-stf {
      position: absolute;
      margin: 90px 100px;
    }
    .news-block.news-block_main {
      width: 200%;
      height: 202%;
      top: 0;
      left: 0;
    }
    .news-block.news-block_2 {
      top: 0;
      left: 200%;
      border-left: 4px solid #0e0f16;
    }
    .news-block.news-block_3 {
      top: 100%;
      left: 200%;
      border-left: 4px solid #0e0f16;
      border-top: 4px solid #0e0f16;
    }
    .news-block.news-block_4 {
      top: 202%;
      left: 0%;
      border-top: 4px solid #0e0f16;
    }
    .news-block.news-block_5 {
      top: 202%;
      left: 100%;
      border-top: 4px solid #0e0f16;
      border-left: 4px solid #0e0f16;
    }
    .news-block-hover_5 img {
      width: 398px;
      height: 225px;
    }
    .news-block.news-block_6 {
      top: 202%;
      left: 200%;
      border-top: 4px solid #0e0f16;
      border-left: 4px solid #0e0f16;
    }
    .news-block .news-block-descr {
      padding: 21px 20px 11px;
      font-family: 'Roboto Condensed', 'Segoe UI', Tahoma, Arial, sans-serif;
    }
    .news-block-descr {
      position: absolute;
      bottom: 7%;
      left: 0;
      width: 95%;
      padding: 15px 10px 8px;
      color: #fff;
      line-height: 1em;
      z-index: 5;
    }
    .news-block_2 .news-block-descr,
    .news-block_3 .news-block-descr,
    .news-block_4 .news-block-descr,
    .news-block_5 .news-block-descr,
    .news-block_6 .news-block-descr {
      bottom: 11%;
    }
    .news-block:hover .news-block-stats {
      color: #000;
    }
    .news-block-stats span.news-comm {
      text-decoration: underline;
    }
    .news-block-stats span {
      font-family: ProximaLight;
    }
    .news-block .news-block-step_to_full_main,
    .news-block-step_to_full_2,
    .news-block-step_to_full_3,
    .news-block-step_to_full_4,
    .news-block-step_to_full_5,
    .news-block-step_to_full_6 {
      opacity: 0;
      transition: 0.3s all;
      z-index: 10;
    }
    .news-block .news-block-step_to_full_main {
      right: -60px;
      margin-top: 415px;
      position: absolute;
    }
    .news-block:hover .news-block-step_to_full_main,
    .news-block-step_to_full_2,
    .news-block-step_to_full_3,
    .news-block-step_to_full_4,
    .news-block-step_to_full_5,
    .news-block-step_to_full_6 {
      opacity: 1;
      transition: 0.3s all;
      z-index: 10;
    }
    .news-banner {
      margin-top: 15px;
      overflow: hidden;
    }
    .news-banner img {
      width: 1210px;
    }
    .news-block-hover_main,
    .news-block-hover_2,
    .news-block-hover_3,
    .news-block-hover_4,
    .news-block-hover_5,
    .news-block-hover_6 {
      display: none;
      position: absolute;
      bottom: 0;
      left: 0;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="news-list">
      <div id="actuallynews" class="anews">
        <div class="news-block news-block_main " style="background-image: url(http://i.imgur.com/NG5QZQv.jpg);">
          <a href="#">
            <div class="news-block-hover_main" style="display:none;">
              <img src="http://i.imgur.com/XjdCeR1.png">
            </div>
          </a>
        </div>
        <div class="news-block news-block_2" style="background-image: url(http://i.imgur.com/CEyKu1J.jpg);">
          <div class="news-block-hover_2" style="display:none;">
            <img src="http://i.imgur.com/0Onvos6.png">
          </div>
        </div>
        <div class="news-block news-block_3" style="background-image: url(http://i.imgur.com/CEyKu1J.jpg);">
          <div class="news-block-hover_3" style="display:none;">
            <img src="http://i.imgur.com/0Onvos6.png">
          </div>
        </div>
        <div class="news-block news-block_4" style="background-image: url(http://i.imgur.com/CEyKu1J.jpg);">
          <div class="news-block-hover_4" style="display:none;">
            <img src="http://i.imgur.com/0Onvos6.png">
          </div>
        </div>
        <div class="news-block news-block_5" style="background-image: url(http://i.imgur.com/CEyKu1J.jpg);">
          <div class="news-block-hover_5" style="display:none;">
            <img src="http://i.imgur.com/0Onvos6.png">
          </div>
        </div>
        <div class="news-block news-block_6" style="background-image: url(http://i.imgur.com/CEyKu1J.jpg);">
          <div class="news-block-hover_6" style="display:none;">
            <img src="http://i.imgur.com/0Onvos6.png">
          </div>
        </div>
      </div>
    </div>

    Now, as I think, he looks very cozy and incorrect, but he does what I need. What you can do with JS is to make it look less normal.



  • Update: As noted by @Maqsood, no js is available at all. If you can use it better :hover css selter, instead of hanging a lot of js events.

    Create an object with the sensors for elements that will hide or show. Then follow him by adding events.

    var blocks = {
     '.news-block_main': '.news-block-hover_main',
     '.news-block_2': '.news-block-hover_2',
     //... other blocks
    };
    

    //es6
    for( var selector in blocks ){
    //let variable will "remember" it's value when event fire.
    //it doesn't hoist (accessible only in for loop).

    let $hover_block = $( blocks[ selector ] );
    $( selector ).hover(
    function() { $hover_block.show('fast'); },
    function() { $hover_block.hide('fast'); }
    );
    }

    //es5 version
    for( var selector in blocks ){
    var $hover_block = $( blocks[ selector ] );
    //"var" variable will change it value on each iteration
    // it hoist to top of function (if any).

    //need to create separate scope for each iteration.
    ( function( $hover_block ){
    $( selector ).hover(
    function() { $hover_block.show('fast'); },
    function() { $hover_block.hide('fast'); }
    );
    }( $hover_block ) );
    }




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2