两个加div，a，h2，css悬停

Question

我有：

<div class="item">
    <div class="thumb">
        <a class="clip-link" data-id="17228" href="http://t3.gstatic.com/images?q=tbn:ANd9GcTR6pGMoMUINSzoWyR0J_a1fAR9W0DsMjlOGQ-12W8jFiQmPW6B">
            <span class="clip">
                <img src="http://t3.gstatic.com/images?q=tbn:ANd9GcTR6pGMoMUINSzoWyR0J_a1fAR9W0DsMjlOGQ-12W8jFiQmPW6B">
            </span>                         
            <span class="overlay"></span>
        </a>
    </div>          
        <div class="data">
            <h2 class="entry-title"><a href="http://t3.gstatic.com/images?q=tbn:ANd9GcTR6pGMoMUINSzoWyR0J_a1fAR9W0DsMjlOGQ-12W8jFiQmPW6B" rel="bookmark">my title</a></h2>

            <p class="entry-meta">
                <span class="author vcard">
                <a class="author" href="http://t3.gstatic.com/images?q=tbn:ANd9GcTR6pGMoMUINSzoWyR0J_a1fAR9W0DsMjlOGQ-12W8jFiQmPW6B" rel="author">Author</a></span>
            </p>
        </div>

使用css：

.item:hover h2 a {
color: #B70000;
}

a:hover {
color: #B70000;
}

示例：http://jsfiddle.net/ebB4p/7/

我希望将“我的头衔”改为蓝色，同时将鼠标悬停在作者身上。

Answer 1

只定位a:hover，而不是a

内的item

JSFIDDLE

修改

新Fiddle

这会将鼠标定位在.thumb上并且它是同级.data并向下移动到列表中以转到a标记，这是您的标题

.thumb:hover + .data .entry-title a{
    color: #B70000;
}