-1

将鼠标悬停<a>在一列上的元素上可能会触发<a>另一列中的其他元素闪烁。

.cvtitle {
    font-weight: 400;
    text-transform: uppercase
}
#cvpress {
    -webkit-columns: 4 250px;
    -moz-columns: 4 250px;
    columns: 4 250px;
    -webkit-column-gap: 20px;
    /* Chrome, Safari, Opera */
    -moz-column-gap: 20px;
    /* Firefox */
    column-gap: 20px;
}
#cvexhibitions {
    -webkit-columns: 2 400px;
    -moz-columns: 2 400px;
    columns: 2 400px;
    -webkit-column-gap: 20px;
    /* Chrome, Safari, Opera */
    -moz-column-gap: 20px;
    /* Firefox */
    column-gap: 20px;
}
.twocolumns {
    -webkit-columns: 2 400px;
    -moz-columns: 2 400px;
    columns: 2 400px;
    -webkit-column-gap: 20px;
    /* Chrome, Safari, Opera */
    -moz-column-gap: 20px;
    /* Firefox */
    column-gap: 20px;
}
#cvpress a {
    display: inline-block;
    transform: translatex(0px);
    transition: all 0.3s ease-in-out;
}
#cvpress a:hover {
    color: #97cacc;
    transform: translatex(5px);
    transition: all 0.3s ease-in-out;
}
<div id="cvpress">
    <span class="cvtitle">2016 |</span>
    <br>
    <a href="/updates/2016/5/22/feature-in-die-angst-magazine-no2">Die Angst Magazine</a>
    <br>
    <a href="/updates/2016/5/22/noisy-paint-box-exhibition-feature-in-the-wave-newspaper">'The Wave' Newspaper</a>
    <br>
    <a href="/updates/2016/5/22/european-photography-98-feature-of-dear-artist-we-regret-to-tell-you">European Photography #98</a>
    <br>
    <a href="/updates/2016/5/24/featured-in-common-ground-journal-magazine">Common Ground issue 5</a>
    <br>
    <a href="/updates/2016/5/22/incandescent-no-9-feature-of-color-nights">Incandescent Issue 9</a>
    <br> Phose Magazine
    <br> Tika Arts
    <br> Visual Opinion Magazine
    <br>
    <span class="cvtitle">2015 |</span>
    <br> Glamour
    <br> The Week - Photo Blog
    <br> This very instant
    <br> austere magazine
    <br> Magnet
    <br> Strant Magazine
    <br> Don't Take Pictures - at home
    <br> Saatchi Art Blog
    <br> Splash & Grab
    <br> Trip
    <br> Amadeus Magazine
    <br> Portfolio blog
    <br> <a href="/updates/2016/5/24/cache-in-fisheye-magazine-online">Fish Eye</a>
    <br> SVA website
    <br> broad Strokes - Art Fix
    <br> <a href="/updates/2016/5/23/nyip-interview-about-dear-artist-we-regret-to-tell-you">NYIP Blog</a>
    <br> <a href="/updates/2016/5/22/hyperallergic-feature-dear-artist-we-regret-to-tell-you">Hyperallergic</a>
    <br> <a href="/updates/2016/5/22/featureshoot-feature-dear-artist-we-regret-to-tell-you">FeatureShoot</a>
    <br> <a href="/updates/2016/5/22/dead-water-in-its-nice-that-blog">It's Nice That</a>
    <br> <a href="/updates/2016/5/23/petapixle-on-dear-artist-book">PetaPixel</a>
    <br> S Moda
    <br> <a href="/updates/2016/5/23/co-design-photo-essay-about-dead-water-project">Fast Co. Design</a>
    <br> klonblog
    <br> Artisan
    <br> Design taxi
    <br> DCCP
    <br> Steadfast Magazine v.01
    <br> Pahrenheit Magazine
    <br> Nailed magazine
    <br> register citizen Newspaper
    <br> <a href="/updates/2016/5/23/aint-bad-magazine-from-here-on">Aint Bad - "From Here On"</a>
    <br> WaterFall
    <br> Marathon Blog
    <br> All the best, Alice 2015
    <br> 365 Artists, 365 Days Project
    <br> Streit House Space
    <br> #Photography issue 14
    <br> Streit House Space
    <br> Streit House Space Zine
    <br> #Photography issue 14
    <br> Artwork - artist of the week
    <br> Phosphene Magazine
    <br> No Culture Icons
    <br> Lensculture
    <br> SuckerPunch
    <br> Precise Moment
    <br> SF MOMA Tumbler
    <br> All the best, Alice 2015
    <br> 365 Artists, 365 Days Project
    <br>
    <span class="cvtitle">2014 |</span>
    <br> Dienacht Magazine Blog
    <br> Wave-pool Interview Blog
    <br> Mossfull Blog
    <br> Haaretz Photography Blog
    <br> Mabel Blog
    <br> #Photography magazine
    <br> Der Grief -  Book
    <br> Musee' Magazine-No.10 Vo.1
    <br> Musse Magazine Interview
    <br> Umter
    <br> Telephone Weekly paper
    <br> R0P Magazine
    <br> GUP
    <br> dodho
    <br> Photogrphy Philosophy blog
    <br> Photogrpher.RU
    <br> Pulp Collectors
    <br> 30 under 30 women photographers
    <br> loeil de la photographie
    <br> The Artist Catalogue - V.3 Issue1
    <br> Lenscratch
    <br> Digital Photography
    <br> LensCulture
    <br> Photo Digest
    <br> Untitled Blog
    <br> Blow Photo
    <br> Fresh Paint Catalog
    <br> Square Space-  issue #7
    <br> The Telegraph UK
    <br> Oitzarisme
    <br>
    <span class="cvtitle">2013 |</span>
    <br> PH Magazine issue #38
    <br> Aint Bad magazine
    <br> Doc! magazine issue #17
    <br> Leoil de la photographie
    <br> Harama magazine issue #4
    <br> Tonelit magazine issue #5
    <br> Lenscratch family onlie exhibition
    <br> F-Stop magazine issue #62
    <br> Mull it Over Blog
    <br> Empty Mirror
    <br> Saatchi onlie spotlight on photography
    <br> feel free company
    <br>
    <span class="cvtitle">2012 |</span>
    <br> Israel Ha'yom newspaper
    <br> The independent UK
    <br> F-Stop magazine issue #53
    <br> The garlic bread magazine
    <br> Jerusalem Net
    <br> Zman Maal'e Local Newspaper
    <br> Culture 24
    <br> cituated
    <br> size doesnt matter
    <br>
    <span class="cvtitle">2011 |</span>
    <br> Composition magazine issue #20
</div>

我确实看到小提琴闪烁在较低的链接上。

JSFiddle 演示

4

1 回答 1

0

非常奇怪的工作 -

显然 CSS3 列不喜欢超过 3 列的过渡渲染！它导致了我在问题中展示的故障。因此，我形成了一个向前的动画和一个鼠标移出（悬停结束后）事件的过渡：

   #cvpress a {
        display: inline-block;transition: all 0.3s ease-out;
    }

    #cvpress a:hover {
        color: #97cacc;
        display: inline-block;
        position: relative;
        animation-name: move;
        animation-duration: 0.3s;
        animation-iteration-count: 1;
        animation-timing-function: ease-in-out;
        transform: translatex(5px);
    }

    @keyframes move {
        0% {
            transform: translatex(0px);
        }
        100% {
            transform: translatex(5px);
        }
    }

它就像一个魅力！

于 2016-05-25T03:23:06.733 回答