仅将 CSS 悬停状态应用于定义的区域

Question

我已经从手工编码中休息了一下，这让我目前有点难倒。我有一个简单的网站，其中有一个入口页面，有两个大按钮，拆分页面的宽度。

http://www.jse-interiordesign.com/

我的客户现在希望保留按钮的大小，但现在仅将悬停状态应用于"招待"和"住宅"区域周围的框。有没有一种快速简便的方法可以使用 CSS 做到这一点？该页面具有不同的移动设备设置等，我根本不想更改，因为它是由其他人构建的。

这是当前的 CSS：

div.left_link a{
    position: absolute;
    width: 50%;
    height: 100%;
    left: 0px;
    bottom: 0px;
/*  background-color: transparent; */
    text-align: center;
    text-decoration: none;
    z-index: 100011;
    background-color: #FFF; 
    opacity: 0; 
    filter: alpha(opacity=1);
    cursor: pointer; 
}
div.left_link a:hover{
    z-index: 100012 !important;
    background-color: #FFF !important;
    opacity: 0.5 !important; 
}
div.right_link a{
    position: absolute;
    width: 50%;
    height: 100%;
    right: 0px;
    bottom: 0px;
/*  background-color: transparent; */
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    z-index: 100011;
    background-color: #FFF; 
    opacity: 0; 
    filter: alpha(opacity=1);
    cursor: pointer; 
}
div.right_link a:hover{
    z-index: 100012 !important;
    background-color: #FFF !important;
    opacity: 0.5 !important; 
}

提前感谢我能得到的任何帮助！

Answer 1

我很确定如果你要使用：

specific_div_name:hover elementyouwanttochange {
    z-index: 100012 !important;
    background-color: #FFF !important;
    opacity: 0.5 !important; 
}

那会起作用。这意味着，如果您的元素悬停，则此元素将执行以下操作。