Question

我有7个图像，当鼠标悬停在它上面时，这7个图像将被缩放。这种风格我只想申请桌面版。

不幸的是，当我将<div class="first container text-center" id="background"> </div> <div class="second container text-center" id="background"> </div>用于其他平台时，它仍可以在其他平台上生成无响应的页面。

HTML：

.first-body {
  background: url(../../images/MANGO_copy.jpg) no-repeat;
  background-size: cover;
  background-position: top center;
  top: 250px;
  z-index: 10016;
  width: 800px;
  height: 400px;
  position: relative;
}
first-body:hover {
  height: 400px;
  background-size: 800px;
  -webkit-transform: scale(1.1, 1.1);
  -moz-transform: scale(1.1, 1.1);
  opacity: .9;
  -webkit-opacity: .9;
  -moz-opacity: .9;
  transition: all .3s ease-in-out;
}

CSS：

 // To reset dropzone before popup load
    var resetDropzone = function () {

        $('#drop-zone-container').empty();

        var $form = makeElement('form', {
            action: window.pg.constants.url.SETTLEMENT_BASE_URL,
            method: 'post',
            id: 'settlement-proof-form',
            class: 'dropzone'
        });

        $('#drop-zone-container').append($form);

        var settlmentProofDropZone;
        $("#settlement-proof-form").dropzone({
            acceptedFiles: pg.constants.ACCEPTED_FORMAT,
            maxFilesize: pg.constants.ATTACHMENT_MAX_FILE_SIZE, //In MB
            maxFiles: pg.constants.ATTACHMENT_MAX_SIZE,
            addRemoveLinks: true,
            removedfile: function (file) {
                if (file.xhr.responseText.length > 0) {
                    var fileId = JSON.parse(file.xhr.responseText).id;
                    $.ajax({
                        url: pg.constants.url.SETTLEMENT_BASE_URL + fileId,
                        method: 'DELETE',
                        dataType: "json",
                        success: function (result) {
                            $('#uploaded_attachment').val($("#uploaded_attachment").val().replace(result.id + ',', ""));
                            $('#settlement_proof_status span').fadeOut(0);
                            var _ref;
                            return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;

                        },
                        error: function () {
                            $('#settlement_proof_status').text(I18n.t('attachment_deletion_error')).fadeIn();
                        }

                    });
                }

            },
            init: function () {
                settlmentProofDropZone = this;

                this.on("success", function (file, message) {
                    appendContent(message.attachment.url, message.id);
                });
            }
        });

    };

    function makeElement(element, options) {
        var $formField = document.createElement(element);
        $.each(options, function (key, value) {
            if (key === 'innerHTML') {
                $formField.innerHTML = value;
            }
            else {
                $formField.setAttribute(key, value);
            }
        });
        return $formField;
    }
});

Answer 1

你可以将这个悬停css应用于980px以上的媒体

<?php
$my_img = imagecreate( 200, 80 );
$background = imagecolorallocate( $my_img, 0, 0, 255 );
$text_colour = imagecolorallocate( $my_img, 233, 14, 91 );
$line_colour = imagecolorallocate( $my_img, 233, 14, 91  );
imagestring( $my_img, 4, 30, 25, "A Simple Text String", $text_colour );
imagesetthickness ( $my_img, 5 );
imageline( $my_img, 30, 45, 165, 45, $line_colour );

header( "Content-type: image/jpg" );
imagepng( $my_img );
//imagecolordeallocate( $line_color );
imagecolordeallocate( $text_color );
imagecolordeallocate( $background );
imagedestroy( $my_img );
?>

或覆盖媒体中的悬停效果

@media (min-width: 980px) {

    first-body:hover{
    height:400px; 
    background-size:800px;
    -webkit-transform: scale(1.1,1.1);
    -moz-transform:scale(1.1,1.1);
    }
}

Answer 2

使用媒体查询，您可以将：悬停样式定位到特定屏幕尺寸：

（尝试使用全屏代码段并调整浏览器大小）

＆＃13;

#background,
#background-third {
  width: 760px;
  margin: 0 auto;
}

.first-body {
  background: url(http://lorempixel.com/g/800/400/) no-repeat;
  background-size: 820px;
  background-position: top center;
  top: 250px;
  width: 800px;
  height: 400px;
  position: relative;
}
#mango-logo {
  max-width: 200px;
  height: 40px;
  right: 23%;
  position: absolute;
}
@media (min-width: 992px) {
  .first-body:hover {
    height: 400px;
    background-size: 800px;
    -webkit-transform: scale(1.1, 1.1);
    -moz-transform: scale(1.1, 1.1);
    opacity: .9;
    -webkit-opacity: .9;
    -moz-opacity: .9;
    transition: all .3s ease-in-out;
  }
}

＆＃13;

<link rel="StyleSheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<div class="first-body container text-center" id="background">
  <div class="col-lg-8 pull-right">
    <img src="http://lorempixel.com/g/200/40/" id="mango-logo" class="brand" style="margin-top:30%;">
    <div class="info" id="mango">
      <p>In 2011, MANGO flagship store appear in the heart of Phnom Penh's central business district and is the first global brand open in the Kingdom of Cambodia. MANGO is a transnational Spanish clothing based in Barcelona that specializes in fashion for
        young urban women. The brand is well-known as one of the most famous and popular high clothing.</p>
      <div id="info" class="button">visit website</div>
    </div>
  </div>
</div>

＆＃13;

禁用悬停以适应不同的屏幕尺寸

2 个答案: