весь кликабельный <div>с вложенными div - PullRequest
Новая
       23

весь кликабельный <div>с вложенными div

0 голосов
/ 05 марта 2012

То, что я пытаюсь сделать, это изменить цвет фона для всего «ряда» div при наведении курсора мыши и открыть ссылку href, щелкнув любую часть div.Я перепробовал все решения, которые я нашел на SO (как с jquery, так и с чистым css), но я не могу заставить его работать

Вот мой код:

HTML 

    <div id="row">
        <div class="document-date"><?php the_time('d-m-Y') ?></div>
        <div class="document-category"><img src="/images/icon.png" /></div>
        <div class="document-title"><a href="myurl..." target="_blank">My link</a>
        <p>some description</p>
   </div>

И CSS 

#row {

    position: relative;
    width: 700px;
    padding: 5px 0 5px 10px;
    display: block;
    float: left;
}

#row:hover {

    background: #fbf5d8;
}


.document-date{

    float: left;
    color: #1b6392;
    font-size: 12px;
    margin-right: 10px;
    line-height: 35px;

}

.document-category{

    float: left;
    margin-right: 10px;
    line-height: 35px;

}

.document-title {

    width: 350px;
    float: left;
    color: #020100;
    font-size: 12px;
    font-weight: normal;
    margin-top: 1px;
    text-decoration: none;

}

.document-title a{

    width: 350px;
    float: left;
    color: #020100;
    font-size: 14px;
    font-weight: bold;
    margin-top: 1px;
    text-decoration: none;
    display: block;
    width: 100%;
    height: 100%;

}

.document-title a:hover{

    color: #fff;

}

Есть предложения?

Ответы [ 2 ]

0 голосов
/ 05 марта 2012

Предположим, когда вы говорите li, вы имеете в виду div#row

CSS: 

#row:hover {
  cursor: pointer
}

JavaScript (с использованием jQuery): 

$('#row').click(function() {
  // do something
  // example:
  $(this).find('a:first').click();
});
0 голосов
/ 05 марта 2012 
   <div id="row" onclick="alert(1)">
        <div class="document-date" >12-08-2014</div>
        <div class="document-category" ><img src="/images/icon.png" /></div>
        <div class="document-title" ><a href="myurl..." target="_blank" >My link</a><br/><p>some description</p>
   </div>​

Это бы сработало.Или если вы хотите, чтобы div отдельно 

<div id="row">
        <div class="document-date"  onclick="alert(1)">12-08-2014</div>
        <div class="document-category" onclick="alert(1)" ><img src="/images/icon.png" /></div>
        <div class="document-title"  onclick="alert(1)"><a href="myurl..." target="_blank" >My link</a><br/><p>some description</p>
   </div>​
...