CSS规则似乎重命名HTML部分时

Question

客户端站点（工作正在进行中），引导他们的HTML对象已经“分离”（断奶关缪斯，宽容我。）

http://wearethefirehouse.com/phasetest/

1）复制原来的一个缩略图网格，使这3个相同的网格，然后重命名为“#”锚每个匹配nav li项目，所以导航栏将正确拉链给他们。

2）当我这样做，他们的造型（下缩略图文字变压器，模态翻车等）被乱七八糟的格栅1 & 2.

3）第三部分，“门自动化所见“工作正常（缩略图下的文本变换器，模态翻转等），但是，它代替了其相应的导航锚点工作。

问题：我意识到从模板改变的东西我打破了CSS规则之间的联系和HTML ...所以我怎么可以让所有3个格发挥很好像自动门，并从所有这些工作导航栏结束。

Answer 1

如果您查看agency.css文件，您会看到悬停行为的样式仅为具有组合标识的元素定义。

当前CSS：

#portfolio .portfolio-item { 
    right: 0; 
    margin: 0 0 15px; 
} 

#portfolio .portfolio-item .portfolio-link { 
    display: block; 
    position: relative; 
    margin: 0 auto; 
    max-width: 400px; 
} 

#portfolio .portfolio-item .portfolio-link .portfolio-hover { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    opacity: 0; 
    background: rgba(254,209,54,.9); 
    -webkit-transition: all ease .5s; 
    -moz-transition: all ease .5s; 
    transition: all ease .5s; 
} 

#portfolio .portfolio-item .portfolio-link .portfolio-hover:hover { 
    opacity: 1; 
} 

#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content { 
    position: absolute; 
    top: 50%; 
    width: 100%; 
    height: 20px; 
    margin-top: -12px; 
    text-align: center; 
    font-size: 20px; 
    color: #fff; 
} 

#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content i { 
    margin-top: -12px; 
} 

#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h3, 
#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h4 { 
    margin: 0; 
} 

#portfolio .portfolio-item .portfolio-caption { 
    margin: 0 auto; 
    padding: 25px; 
    max-width: 400px; 
    text-align: center; 
    background-color: #fff; 
} 

#portfolio .portfolio-item .portfolio-caption h4 { 
    margin: 0; 
    text-transform: none; 
} 

#portfolio .portfolio-item .portfolio-caption p { 
    margin: 0; 
    font-family: "ff-enzo-web",sans-serif; 
    font-size: 16px; 
    font-style: italic; 
} 

#portfolio * { 
    z-index: 2; 
} 

@media(min-width:767px) { 
    #portfolio .portfolio-item { 
     margin: 0 0 30px; 
    } 
} 

所以你需要添加相应的规则对每个新的ID，你创建的，如：

#electrical .portfolio-item, #lighting .portfolio-item, #door .portfolio-item { 
    right: 0; 
    margin: 0 0 15px; 
} 

/*you'll need to do this for all of the above rules*/ 

或者，你可以为您的三个部分中的每一部分添加一组“类别”，例如：

<section id="lighting" class="bg-light-gray portfolio"> 

，然后你可以改变的CSS来：

.portfolio .portfolio-item { 
    right: 0; 
    margin: 0 0 15px; 
} 

.portfolio .portfolio-item .portfolio-link { 
    display: block; 
    position: relative; 
    margin: 0 auto; 
    max-width: 400px; 
} 

.portfolio .portfolio-item .portfolio-link .portfolio-hover { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    opacity: 0; 
    background: rgba(254,209,54,.9); 
    -webkit-transition: all ease .5s; 
    -moz-transition: all ease .5s; 
    transition: all ease .5s; 
} 

.portfolio .portfolio-item .portfolio-link .portfolio-hover:hover { 
    opacity: 1; 
} 

.portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content { 
    position: absolute; 
    top: 50%; 
    width: 100%; 
    height: 20px; 
    margin-top: -12px; 
    text-align: center; 
    font-size: 20px; 
    color: #fff; 
} 

.portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content i { 
    margin-top: -12px; 
} 

.portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h3, 
.portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h4 { 
    margin: 0; 
} 

.portfolio .portfolio-item .portfolio-caption { 
    margin: 0 auto; 
    padding: 25px; 
    max-width: 400px; 
    text-align: center; 
    background-color: #fff; 
} 

.portfolio .portfolio-item .portfolio-caption h4 { 
    margin: 0; 
    text-transform: none; 
} 

.portfolio .portfolio-item .portfolio-caption p { 
    margin: 0; 
    font-family: "ff-enzo-web",sans-serif; 
    font-size: 16px; 
    font-style: italic; 
} 

.portfolio * { 
    z-index: 2; 
} 

第二个选项是更容易，在我看来，当然更简洁。