Sunday 28 June 2015

Question : How to hide border on the right when you hover on any item?



Ans : 
             HTML
----------------------------------------------------------------------------------------------------------------------------------
<div style="background-color: #ffffff; padding: 10px; border-bottom: 1px solid #ccc">
    <ul class="monitoring-tabs">
        <li>Item 1</li>
        <li>item 2</li>
        <li class="active">Item 3</li>
        <li>Item 4</li>
    </ul>
</div>
CSS
------------------------------------------------------------------------------------------
<style type="text/css">
    .monitoring-tabs {
        list-style-type: none;
        padding: 0;
        margin: 0;
        clear: both;
        overflow: hidden;
        line-height: 25px;
    }

        .monitoring-tabs li {
            float: left;
            font-size: 13px;
            border-right: 1px solid #ccc;
            padding: 0 17px;
            color: #4e5665;
            line-height: 30px;
        }
            .monitoring-tabs li:hover {
                background-color: #e9eaed;
                border-right: none;
            }

        .monitoring-tabs .active {
            font-weight: bold;
            color: black;
        }
</style>

No comments:

Post a Comment