Question

你可以看到我试图做的事情。但是我希望每个图像翻转的底部在右边弹出并淡入后显示。不仅仅是当鼠标悬停在每个图像的底部时。

我也无法将整个事情点击到博客文章而不会使个别链接蒙羞/停止，并且短代码选择也不可行。

我已经活了几天没有运气......（社交图标，将是个人链接，但我还没有这样做）

任何人都知道我哪里出错了？我在底部有一个小提琴。理想情况下，我希望所有人都能在悬停时玩，但显然会延迟底部的黑匣子。我非常讨厌这令人烦恼。

HTML：

<body>
    <div class="wrapper">

            <div class="container left">
                <img src="http://www.glennleader.co.uk/wp-content/uploads/2014/05/suit6.jpg" alt="image" />
                <div class="sig"></div>
                <div class="innercontent css3-2">
                        <span class="css3-2 resize"><br/><h2><a href="bloglink">Title of the blog Post</a></h2>
                        <p>April 29, 2014</p>
                        <p><img src="http://www.glennleader.co.uk/wp-content/uploads/2014/05/share-buttons1-e1399999305264.png" /></p>
<p class="url"><textarea spellcheck="false">http://shortcodegoeshere.com/334</textarea></p>
<p><a href="link1">3/4 length</a> • <a href="link2">Agnelli check</a> • <a href="link3">bespoke jacket</a> • <a href="link4">Jacket</a> • <a href="link5">London Lounge</a></p><span class="clickhere"><a href="bloglink">Click here to read this article</a></span></span>



                </div>

            </div><!-- .container -->


        <div class="container right">
                <img src="http://www.glennleader.co.uk/wp-content/uploads/2014/05/suittemp.jpg" alt="image" />
                <div class="sig"></div>
                <div class="innercontent css3-2">
                        <span class="css3-2 resize"><br/><h2><a href="bloglink">Title of the blog Post</a></h2>
                        <p>April 29, 2014</p>
                        <p><img src="http://www.glennleader.co.uk/wp-content/uploads/2014/05/share-buttons1-e1399999305264.png" /></p>
<p class="url"><textarea spellcheck="false">http://shortcodegoeshere.com/334</textarea></p>
<p><a href="link1">3/4 length</a> • <a href="link2">Agnelli check</a> • <a href="link3">bespoke jacket</a> • <a href="link4">Jacket</a> • <a href="link5">London Lounge</a></p><span class="clickhere"><a href="bloglink">Click here to read this article</a></<span></span>



                </div>

            </div><!-- .container -->

        </footer>

    </div><!-- .wrapper -->


</body>

CSS：

    *{margin:0;padding:0;}

img {margin:0;padding:0px;}

.wrapper{
    margin:0 auto;
    width:720px;
    padding:30px;
    position:relative;
}

.left {float:left;}

.right {float:right;}

p {
    color:#000;
    font-size:14px;
    margin-bottom: 12px;
}

a{
    text-decoration:none;
    color: #000
}

h2, h2 a { font-size: 20px;
color: #000;
line-height: 30px;
}

h2 a:hover, a:hover {
 color:#F3625F;
}

.container{
    position:relative;
    overflow:hidden;
    width: 300px;
    max-height: 100%;
}

.sig {
    display: block;
    width: 98%;
    height: 98%;
    background: url(http://www.glennleader.co.uk/wp-content/uploads/2014/05/signature.png) bottom right no-repeat ;
    top: 0;
    left: 0;
    position:absolute;
    overflow: hidden;
}

.resize {
    width: 95%;
    height: 100%;
    position: absolute;
    display: block;
    overflow: hidden;
    padding: 0 2.5%;
    top: 0;
    left: 0;
    -webkit-transition: all .2s ease-out;
     -moz-transition: all .2s ease-out;
     transition: all .2s ease-out;
     opacity: 0;
}

   .resize:hover {
    opacity: 1;
}

.clickhere {
    position: absolute;
    display: block;
    overflow: hidden;
    width: 300px;
    height: 20px;
    padding: 15px 0;
    text-align: center;
    bottom: 0;
    left: 0;
    background: #000;
    opacity: 0;
    -webkit-transition: all .3s ease-in;
     -moz-transition: all .3s ease-in;
     transition: all .3s ease-in;
     animation-delay:2s;
    -webkit-animation-delay:2s;
    -moz-animation-delay:2s;

}
.clickhere:hover a {
    display: block;
    color: #fff;
    font-weight: 800;
}

.clickhere:hover {
    opacity: 0.5;
    cursor: pointer;
}

.clickhere a:hover {
 color:#F3625F
}

.url textarea {
width: 100%;
border: 0 none transparent;
margin: 0;
padding: 0;
outline: 0;
resize: none;
overflow: hidden;
font-family: inherit;
background: 0;
text-align: center;
font-size: 12px;
height: 16px;
-webkit-appearance: textarea;
-webkit-rtl-ordering: logical;
-webkit-user-select: text;
flex-direction: column;
cursor: auto;
white-space: pre-wrap;
word-wrap: break-word;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
-webkit-writing-mode: horizontal-tb;
background: transparent;
}

.innercontent {
 display: block;
  height: 100%;
  text-align: center;
  width:100%;
  background:rgba(255,255,255,0.7);
   position:absolute;
}
.css3-2:hover .resize {

}

.css3-2 {
 bottom:-370px;left:0;
 -webkit-transition: all .5s ease-out;
 -moz-transition: all .5s ease-out;
 -o-transition: all .5s ease-out;
 transition: all .5s ease-out;
}

.innercontent a.css3-2{
 -webkit-transition: all .5s ease-out;
 -moz-transition: all .5s ease-out;
 -o-transition: all .5s ease-out;
 transition: all .5s ease-out;
}

.container:hover .css3-2 {
 bottom:4px;
 cursor: pointer;
}

小提琴：

http://jsfiddle.net/Veriix/euXGZ/

Answer 1

第一个问题很容易解决......你需要将:: hover-pseudo类添加到父元素中以正确地改变样式。

.css3-2:hover .clickhere a, .clickhere:hover a {
display: block;
color: #fff;
    font-weight: 800;
}

.css3-2:hover .clickhere, .clickhere:hover {
    opacity: 0.5;
    cursor: pointer;
}

 .css3-2 .clickhere a:hover, .clickhere a:hover {
 color:#F3625F

}

更新小提琴： http://jsfiddle.net/euXGZ/5/

（我没有进行任何动画更改，只是关于显示链接onhover的问题的更新）

编辑：如果你不想让可点击的元素滑入，请给它一个绝对的位置，也许可以添加一些不同的动画（如果你想让它等到载玻片完成就包括一个延迟！）< / p>
animation-delay:2s; -webkit-animation-delay:2s; /* Safari and Chrome */

https://www.facebook.com/j.beargraphics

CSS3动画，并没有完全正确

1 个答案: