Question

如何在div订阅表单上创建悬停。这是我想要创建的图像。 http://postimg.org/image/yliymvnoj/

这是我到目前为止所拥有的。 https://jsfiddle.net/alnhurt24/yby4mv7b/1/

HTML

<div class="subscribe">
    <form id="form" name="form" action="#" method="post">
        <div id="block">
            <label id="user" for="name">p</label>
            <input type="text" name="name" id="name" placeholder="name" required/>
            <label id="email" for="adress">k</label>
            <input type="text" name="email" id="email" placeholder="email" required />
            <input type="submit" id="submit" name="submit" value="a" />
        </div>
    </form>
    <div id="option">
        <section class="color-blocks">
            <div class="color-block block-left col-md-6 col-sm-12"></div>
            <div class="color-block block-right col-md-6 col-sm-12"></div>
            <div class="container">
                <div class="row">   <a href="#" class="block-content">
                            <div class="col-md-2 col-sm-4 text-center">
                                <i class="icon pe-7s-music icon-large"></i>
                            </div>

                            <div class="col-md-4 col-sm-8">
                                <h1>artists - share your passion with the world<br>
                                <p>
                                    sign up today to reserve your spot before we launch or to stay up to date on what's new.                        </p>

                        <a href="#" class="block-content">
                            <div class="col-md-2 col-sm-4 text-center">
                                <i class="icon pe-7s-world icon-large"></i>
                            </div>

                            <div class="col-md-4 col-sm-8">
                                <h1>charities - raise funds effortlessly. <br>
                                <p>
                                    sign up today to reserve your spot before we launch or to stay up to date on what's new.
                                </p>

CSS

/* this is for the hover over */
 form, .subscribe:hover>div {
    display: none;
}
.subscribe:hover>form {
    display: block;
}
/* this is for the the new subscribe signup form */
 @import url('http://fonts.googleapis.com/css?family=Open+Sans');
 @font-face {
    src:url("fonts/pictos-regular-webfont.ttf") format("truetype"), url("fonts/pictos-regular-webfont.otf") format("opentype"), url("fonts/pictos-regular-webfont.svg") format("svg");
    font-family:icon;
}
body {
    background:#292931;
    font-family:'Open Sans';
}
label {
    font-family:icon;
    text-shadow:0 -1px 0 #666;
    -webkit-font-smoothing: antialiased;
}
#block, #option {
    width:230px;
    height:113px;
    margin:auto;
}
#block {
    background:#423143;
    margin-top:100px;
}
#block:before {
    content:'';
    display:block;
    width:230px;
    height:3px;
    /* The rainbow*/
    background:linear-gradient(left, rgba(173, 107, 173, 1) 0%, rgba(173, 107, 173, 1) 1%, rgba(181, 121, 168, 1) 1%, rgba(181, 126, 181, 1) 2%, rgba(181, 126, 181, 1) 2%, rgba(189, 136, 187, 1) 3%, rgba(189, 136, 187, 1) 3%, rgba(197, 151, 181, 1) 4%, rgba(197, 151, 181, 1) 5%, rgba(206, 165, 194, 1) 5%, rgba(206, 165, 194, 1) 6%, rgba(214, 178, 194, 1) 6%, rgba(214, 178, 194, 1) 7%, rgba(222, 189, 189, 1) 7%, rgba(222, 189, 189, 1) 8%, rgba(222, 197, 197, 1) 8%, rgba(222, 197, 197, 1) 9%, rgba(229, 210, 200, 1) 9%, rgba(229, 210, 200, 1) 10%, rgba(241, 230, 197, 1) 11%, rgba(241, 230, 197, 1) 12%, rgba(247, 247, 197, 1) 12%, rgba(247, 247, 197, 1) 15%, rgba(236, 247, 194, 1) 15%, rgba(236, 247, 194, 1) 16%, rgba(230, 239, 189, 1) 17%, rgba(230, 239, 189, 1) 18%, rgba(222, 239, 183, 1) 19%, rgba(222, 239, 183, 1) 20%, rgba(212, 239, 176, 1) 20%, rgba(212, 239, 176, 1) 22%, rgba(201, 230, 165, 1) 22%, rgba(201, 230, 165, 1) 25%, rgba(186, 230, 158, 1) 26%, rgba(186, 230, 158, 1) 27%, rgba(182, 225, 147, 1) 27%, rgba(182, 225, 147, 1) 30%, rgba(169, 222, 140, 1) 30%, rgba(169, 222, 140, 1) 32%, rgba(160, 222, 132, 1) 32%, rgba(160, 222, 132, 1) 36%, rgba(156, 214, 147, 1) 36%, rgba(156, 214, 147, 1) 39%, rgba(148, 214, 161, 1) 40%, rgba(148, 214, 161, 1) 43%, rgba(148, 214, 174, 1) 43%, rgba(148, 214, 174, 1) 45%, rgba(148, 206, 186, 1) 46%, rgba(148, 206, 186, 1) 48%, rgba(140, 206, 197, 1) 49%, rgba(140, 206, 197, 1) 52%, rgba(140, 206, 212, 1) 52%, rgba(140, 206, 212, 1) 55%, rgba(140, 195, 221, 1) 55%, rgba(140, 195, 221, 1) 58%, rgba(148, 179, 210, 1) 59%, rgba(148, 179, 210, 1) 60%, rgba(156, 173, 206, 1) 61%, rgba(156, 167, 197, 1) 61%, rgba(156, 167, 197, 1) 63%, rgba(165, 154, 189, 1) 63%, rgba(165, 154, 189, 1) 64%, rgba(169, 148, 181, 1) 65%, rgba(169, 148, 181, 1) 66%, rgba(173, 134, 175, 1) 66%, rgba(173, 134, 175, 1) 67%, rgba(181, 121, 168, 1) 67%, rgba(181, 121, 168, 1) 69%, rgba(189, 115, 156, 1) 69%, rgba(189, 115, 156, 1) 70%, rgba(196, 102, 146, 1) 71%, rgba(196, 102, 146, 1) 72%, rgba(200, 88, 143, 1) 73%, rgba(200, 88, 143, 1) 74%, rgba(206, 80, 132, 1) 74%, rgba(206, 80, 132, 1) 76%, rgba(214, 64, 123, 1) 76%, rgba(214, 64, 123, 1) 78%, rgba(220, 59, 114, 1) 78%, rgba(220, 59, 114, 1) 79%, rgba(222, 48, 110, 1) 79%, rgba(222, 48, 110, 1) 80%, rgba(232, 42, 107, 1) 80%, rgba(232, 42, 107, 1) 81%, rgba(230, 33, 99, 1) 81%, rgba(230, 33, 99, 1) 83%, rgba(232, 42, 107, 1) 83%, rgba(232, 42, 107, 1) 84%, rgba(222, 48, 110, 1) 85%, rgba(222, 48, 110, 1) 86%, rgba(220, 59, 114, 1) 87%, rgba(220, 59, 114, 1) 88%, rgba(214, 64, 123, 1) 88%, rgba(214, 64, 123, 1) 89%, rgba(206, 66, 130, 1) 90%, rgba(206, 66, 130, 1) 92%, rgba(199, 74, 141, 1) 92%, rgba(199, 74, 141, 1) 94%, rgba(189, 82, 148, 1) 95%, rgba(189, 82, 148, 1) 96%, rgba(184, 90, 158, 1) 97%, rgba(184, 90, 158, 1) 99%, rgba(181, 99, 165, 1) 99%, rgba(181, 99, 165, 1) 100%);
}
#block:after {
    content:'';
    display:block;
    width:15px;
    height:15px;
    background:#423143;
    transform:rotate(-45deg);
    margin:10px 18px;
    position:absolute;
}
#block label, #submit {
    position:absolute;
    width:33px;
    height:34px;
    background:#dedede;
    margin:15px;
    text-align:center;
    line-height:2.2;
    color:#857487;
    border-top-left-radius:2px;
    border-bottom-left-radius:2px;
}
#block label#pass {
    position:absolute;
    width:33px;
    height:34px;
    background:#dedede;
    margin:-5px 15px;
}
#submit {
    border:0;
    margin:-29px 180px;
    border-top-left-radius:0px;
    border-bottom-left-radius:0px;
    border-top-right-radius:2px;
    border-bottom-right-radius:2px;
    font-family:icon;
    background:#ae6cac;
    text-shadow:0 -1px 0 #333;
    box-shadow:-1px 0 1px 0px #6c5b6d;
    font-size:12px;
    line-height:2.8;
    padding:0;
}
#submit:hover {
    color:#333;
    cursor: pointer;
    background:#27ae60;
}
#user, #pass {
    box-shadow:0.1px 0 2px #6c5B6d;
}
#block input[type=text], #block input[type=password], #option p {
    font-family:'Open Sans';
    font-weight:300;
    -webkit-font-smoothing: antialiased;
}
#block input[type=text], #block input[type=password] {
    width:156px;
    height:32px;
    margin:15px 15px;
    border:0;
    border-radius:2px;
    outline:0;
    display:block;
    font-size:18px;
}
#block input[type=password] {
    width:156px;
    height:32px;
    margin:-5px 15px;
}
#submit {
    color:#fff;
    font-size:8px;
    font-weight:bold;
}
#option {
    width:230px;
    height:80px;
    overflow:hidden;
    margin:auto;
}
#option p {
    color:#6c5B6d;
    font-size:24px;
    text-transform:uppercase;
    padding:0px 18px;
    margin-top:15px;
    display:block;
    float:left;
    -webkit-font-smoothing: antialiased;
    /*text-shadow:0 -1px 0 #000;*/
}
#option a {
    -webkit-font-smoothing: antialiased;
    color:#6c5B6d;
    /*text-shadow:0 -1px 0 #000;*/
    font-size:12px;
    display:block;
    float:right;
    margin:26px 15px;
}
input {
    padding-left:40px;
}
#block:active > #block:before {
    background-position:100px 100px;
}
/* placeholder */
 ::-webkit-input-placeholder {
    -webkit-font-smoothing: antialiased;
    color:#999;
    font-size:16px;
}
:-moz-input-placeholder {
    color:#999;
    font-size:16px;
}
input::-webkit-validation-bubble-message {
    color:white;
    background: #e62163;
    border:0;
    border-radius:0;
    padding:0;
    width:55px;
    height:34px;
    position:absolute;
    float:left;
    margin:-33px 208px;
    text-align:center;
    line-height:2.7em;
    box-shadow:0 0 0;
}
input::-webkit-validation-bubble-message:before {
    content:"X";
    display:block;
    font-family:icon;
    color:white;
    background: #e62163;
    border:0;
    border-radius:0;
    padding:0;
    width:34px;
    height:34px;
    position:absolute;
    float:left;
    margin:0px -208px;
    text-align:center;
    line-height:2.7em;
    color: #fff;
    border-top-left-radius:2px;
    border-bottom-left-radius:2px;
    -webkit-font-smoothing: antialiased;
}
input::-webkit-validation-bubble-icon {
    display: none;
}
input::-webkit-validation-bubble-arrow {
    background: #e62163;
    border:0;
    width:10px;
    height:10px;
    position:absolute;
    margin:-23px 178px;
}
/* this is for the purple block */
 .color-blocks {
    position: relative;
    overflow: hidden;
    color: #fff;
}
.color-block {
    position: absolute;
    top: 0px;
    height: 100%;
    padding: 0px;
    color: #fff;
    transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
}
.color-blocks h1, .color-blocks h2, .color-blocks h3, .color-blocks h4, .color-blocks h5, .color-blocks h6 {
    color: #fff;
}
.color-blocks h1 {
    margin-bottom: 12px;
}
.color-blocks a {
    color: #fff;
    pointer-events: auto;
}
.color-blocks a:hover i {
    transform: rotateZ(-10deg);
}
.color-blocks i, .contained-promo i {
    color: #c600ae;
    font-size: 70px;
    display: inline-block;
    border: 2px solid #fff;
    border-radius: 50%;
    width: 120px;
    height: 120px;
    line-height: 117px;
    background: #fff;
    text-align: center;
    transition: all 0.1s ease-out;
    -webkit-transition: all 0.1s ease-out;
    -moz-transition: all 0.1s ease-out;
}
.block-left {
    background-color: #c600ae;
}
.block-right {
    background-color: #9d008a;
    right: 0px;
}
@media all and (max-width: 768px) {
    .block-content {
        margin-bottom: 144px;
        overflow: hidden;
        display: block;
    }
    .block-content:last-of-type {
        margin-bottom: 0px;
    }
    .color-block {
        height: 50%;
        width: 100%;
    }
    .block-right {
        top: 50%;
    }
}
@media all and (max-width: 767px) {
    .block-content i {
        margin-bottom: 30px;
    }

任何帮助都会很棒。谢谢！

Answer 1

这是一种在mouseover事件中显示/隐藏窗口的javascript方式。我已经包含了一些评论，希望有助于解释所有事情的作用。

HTML

<div id="content">
    Hover Here!
</div>

<div id="mouseOverWindow">
    This Window Appears!
</div>

的JavaScript

// This will run the "runOnLoad" function 
//automatically when the page is loaded
window.onload = runOnLoad;

function runOnLoad() {

    //First we need to find the element we want to hide
    //We can do this by passing the target element's Id name
    //to getElementById
    var mouseOverWindow = document.getElementById("mouseOverWindow");

    //Now that we have access to the element lets hide it
    mouseOverWindow.style.visibility = 'hidden';

    //Next lets grab our hover window by it's id
    var content = document.getElementById("content");

    //Now that we have it lets make it run the "showWindow" function
    //when the element is moused over
    content.onmouseover = showWindow;

}

//This is run when the element is moused over
function showWindow() {
    //Let's make our hidden window visible!
    mouseOverWindow.style.visibility = 'visible';
}

CSS

#content {
    height: 50px;
    width: 100px;
    border: 1px solid red;
    text-align:center;
    margin: 10px;
    padding-top: 15px;
}

#mouseOverWindow {
    height: 50px;
    width:100px;
    border: 1px solid blue;
    text-align:center;
    margin: 10px;
    padding-top: 15px;
}

JFiddle：https://jsfiddle.net/yy1sweLe/

这只是实现此目的的几种方法之一。如果您有任何问题，请告诉我。

试图在div订阅表单上创建一个悬停

1 个答案: