Question

我需要你的帮助。希望有人可以教我如何做到这一点。我希望图像上的橙色下划线像template上的“最新项目”一样悬停。我不知道怎么做，我想知道。您的回答将受到高度赞赏！这是我的HTML。

<div class="sixteen columns">
        <h4 class="headline">Recent Work</h4>
    </div>

        <!-- 1/4 Column -->
        <div class="four columns">
                <div class="item-img"><a href="images/portfolio_images/portfolio_3_01_large.jpg" rel="imagebox" title="SockMonkee"><img src="images/portfolio_images/portfolio_3_01.jpg" alt=""/><div class="overlay zoom"></div></a></div>
                <div class="portfolio-item-meta">
                    <h5><a href="single_project.html">SockMonkee</a></h5>
                    <p>Aenean sit amet ligula est, conseact etur lectus. Maecenas hendrerit, lorem.</p>
                </div>
        </div>

        <!-- 1/4 Column -->
        <div class="four columns">
                <div class="item-img"><a href="single_project.html"><img src="images/portfolio_images/portfolio_3_06.jpg" alt=""/><div class="overlay zoom"></div></a></div>
                <div class="portfolio-item-meta">
                    <h5><a href="single_project.html">Franky Fisticuffs</a></h5>
                    <p>Aenean sit amet ligula est, conseact etur lectus. Maecenas hendrerit, lorem.</p>
                </div>
        </div>

        <!-- 1/4 Column -->
        <div class="four columns">
                <div class="item-img"><a href="single_project.html"><img src="images/portfolio_images/portfolio_3_04.jpg" alt=""/><div class="overlay zoom"></div></a></div>
                <div class="portfolio-item-meta">
                    <h5><a href="single_project.html">Package Project</a></h5>
                    <p>Gravida sit amet ligula eget conseact etur lectu aecenas hendrerit bibenea.</p>
                </div>
        </div>

        <!-- 1/4 Column -->
        <div class="four columns">
            <div class="item-img"><a href="images/portfolio_img_04_large.jpg" rel="imagebox" title="Ampertastic Mr. Fox"><img src="images/portfolio_img_04.jpg" alt=""/><div class="overlay zoom"></div></a></div>
            <div class="portfolio-item-meta">
                <h5><a href="single_project.html">Ampertastic Mr. Fox</a></h5>
                <p>Fermentum sit amet ligula estabe, eget conseact lectus maecenas hendrerit.</p>
            </div>
        </div>

    <div class="clearfix"></div>

我的CSS

.portfolio-item {margin-bottom: 20px;}

.portfolio-item-meta h5 {
    font-size: 12px;
    font-family: Arial, sans-serif;
    font-weight: bold;
    line-height: 16px;
    padding: 12px 0 8px 0;
    margin: 0 0 8px 0;
    border-bottom: 1px solid #e7e7e7;
    letter-spacing: 0;
}

.portfolio-item-meta h5 span {
    display: block;
    color: #888;
    font-weight: normal;
    margin-top: 3px;
}

.portfolio-item-meta a{color:#444;}
.portfolio-item-meta a:hover {color:#888;}
.portfolio-item-meta p {color: #555;}

.item-img, .post-img {position: relative;}

.overlay {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0px;
    width: 100%;
    z-index: 1;
    z-index: 40;
    opacity: 0;
    -moz-opacity: 0;
    filter:alpha(opacity=0);
    -webkit-transition: opacity 180ms ease-in-out;
    -moz-transition: opacity 180ms ease-in-out;
    -o-transition: opacity 180ms ease-in-out;
    transition: opacity 180ms ease-in-out;
}

.overlay.zoom {background: url(../images/overlay.png) no-repeat center center, url(../images/overlay_bg.png) center center;}

.overlay:hover {
    opacity: 1;
    -moz-opacity: 1;
    filter:alpha(opacity=100);
}

Answer 1

你试过这个吗？

.item-img:hover {border-bottom: 1px solid orange;}

如果有效，则需要添加

transition: all 0.1s linear

例如，你可以在这里找到更多： http://www.w3schools.com/css/css3_transitions.asp

橙色下划线图像悬停

1 个答案: