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; 
} 

第二個選項是更容易，在我看來，當然更簡潔。