4

Lo que necesito es que al pasar sobre el polígono de Panamá, aparezca el div que tiene la información de talleres, lo ideal sería que fuera solo en CSS.

Lo que necesito es que al pasar sobre el polígono de panamá, aparezca el div que tiene la información de talleres

Éste es un código de ejemplo:

h1 {
  font-family: Open Sans;
  font-weight: 900;
  font-size: 40px;
  color: #363F40;
  margin-bottom: -10px;
}

h2 {
  font-family: Open Sans;
  font-weight: 900;
  font-size: 25px;
  color: #363F40;
}

h3 {
  font-family: Open Sans;
  color: #00c6d9;
  font-size: 17px;
  margin-top: -20px;
}

p {
  font-family: Open Sans;
  font-weight: 200;
  font-size: 13px;
  color: #363F40;
  margin-top: -12px;
}

Button {
  padding: 7px;
  padding-left: 20px;
  padding-right: 20px;
  background-color: #363F40;
  border: none;
}

a {
  color: white;
  font-family: Open Sans;
  font-weight: 900;
  font-size: 15px;
  text-decoration: none;
}


/*clases*/

#talleresColombia {
  background-color: antiquewhite;
  display: none;
  width: 500px;
  height: 280px;
  margin-left: 50px;
}


/*mapas*/

.latinoamerica {
  display: inline-block;
  width: 500px;
  background-color: aqua;
}

.cuerpo {
  display: flex;
  align-items: center;
  background-color: fuchsia;
}

.cls-1 {
  fill: #ffb100;
  stroke: #000;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cls-1 {
  stroke-width: 0.25px;
}


/*HOVER_____________________*/

#panama:hover {
  fill: #00c6d9;
}

#panama:hover #talleresColombia {
  display: inline-block;
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="script.js"></script>

<div class="cuerpo">
  <div class="latinoamerica">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 106.28 170.91">
      <title>Latinoamerica</title>
      <g id="Capa_2" data-name="Capa 2">
        <g id="BACKGROUND">
          <polygon id="panama" class="cls-1" points="11.61 11.19 11.88 10.98 12.03 10.44 12.35 9.88 12.15 9.33 12.08 9.04 12.17 8.66 11.99 8.49 11.69 8.32 11.61 8.08 11.22 7.62 10.29 7.08 9.75 6.96 8.79 6.96 8.47 6.88 8.34 6.67 8.01 6.53 7.79 6.56 7.17 7 6.5 7.16 5.15 7.84 4.75 8.22 4.37 8.27 3.66 8.24 2.9 7.72 2.39 7.48 2.26 7.59 2.52 7.75 2.52 7.97 2.17 8.04 1.8 7.84 1.69 7.67 1.78 7.58 1.93 7.54 1.81 7.4 1.63 7.42 1.36 7.33 1.12 7.07 1.03 6.83 0.65 6.81 0.44 6.95 0.46 7.34 0.19 7.64 0.13 7.99 0.38 8.07 0.65 8.45 0.3 8.72 0.2 9.06 0.22 9.3 0.36 9.51 0.67 9.48 1.04 9.54 1.45 9.47 1.66 9.32 1.85 9.53 1.82 9.69 2.07 9.76 2.87 9.87 2.98 10.43 3.25 11 3.6 11.21 3.97 11.19 4.11 10.93 3.96 10.76 4.1 10.53 4.39 10.58 4.53 10.76 4.45 11 4.56 11.45 4.48 11.77 4.62 12.01 5.24 12.11 5.51 11.69 5.81 11.38 6.21 11.45 6.43 11.38 6.46 10.93 6.12 10.63 5.75 10.36 5.59 10 5.66 9.76 6.02 9.57 6.71 9.42 7.34 8.85 7.31 8.64 7.18 8.54 7.23 8.12 7.89 7.76 8.43 7.72 8.7 7.87 9.1 8.26 9.4 8.31 9.78 8.83 9.93 9.23 10.16 9.42 10.29 9.3 10.58 8.97 10.82 8.96 10.92 9.26 10.74 9.45 10.52 9.48 10.15 10.04 9.98 10.2 10.16 10.78 10.65 11.46 11.11 11.87 11.4 11.21 11.61 11.19" />
        </g>
      </g>
    </svg>
  </div>
  <div id="talleresColombia">
    <h1>TALLERES</h1>
    <svg height="5">
      <line x1="0" y1="0" x2="100" y2="0" style="stroke:#ffb100;stroke-width:8;" />
    </svg>
    <h2>Gestión de Riesgos</h2>
    <h3>9 y 10 de mayo 2017</h3>
    <p>A partir de un análisis de Stakeholders, para mantener la licencia para operar y crecer En el contexto social y ambiental actual la Gestión de Riesgos del Entorno puede significar la rentabilidad esperada de un proyecto o una operación, la reputación
      y la calidad en el relacionamiento con los stakeholders.</p>
    <button> <a href="http://google.com">VER MÁS</a> </button>
  </div>
</div>

7
  • Hola junior tienes tu codigo ? o lo que trataste de resolver? Si no hiciste nada aun te doy una pista, utiliza los pseudo elementos de css before y after Commented el 13 ene. 2018 a las 4:31
  • Hola, busqué sobre los pseudo elementos pero no entendi muy bien cómo utilizarlos, te agradecería enormemente que me ayudaras con esa duda, anexé el código en la pregunta Commented el 13 ene. 2018 a las 5:02
  • @JuniorRodriguez quiere que cuando pase el mouse el pais debe agrandarse? Commented el 13 ene. 2018 a las 5:10
  • 1
    Ya logré solucionarlo con js, igualmente muchas gracias por la ayuda Commented el 13 ene. 2018 a las 13:21
  • 1
    Hola @JuniorRodriguez, si conseguiste solucionarlo, sería ideal que compartieses el código en una respuesta para que si algún otro usuario se encuentra con el mismo problema pueda tener una referencia (y no te olvides de marcar tu respuesta como aceptada pasado el tiempo requerido).
    – Alvaro Montoro
    Commented el 16 mar. 2018 a las 13:04

2 respuestas 2

3

Esta fue la solución con jQuery. Estoy asociando al evento $('#Colombia').hover(), y llamando a

$('#talleresColombia').css("display", "inline-block");

para mostrar el div.

Código:

$('#Colombia').hover(
  function() {
    $('#talleresColombia').css("display", "inline-block");
  }, //shows when hovering over
  function() {
    $('#talleresColombia').css("display", "none");
  } //shows when hovering over
);
/* texto*/

h1 {
  font-family: Open Sans;
  font-weight: 900;
  font-size: 40px;
  color: #363F40;
  margin-bottom: -10px;
}

h2 {
  font-family: Open Sans;
  font-weight: 900;
  font-size: 25px;
  color: #363F40;
}

h3 {
  font-family: Open Sans;
  color: #00c6d9;
  font-size: 17px;
  margin-top: -20px;
}

p {
  font-family: Open Sans;
  font-weight: 200;
  font-size: 13px;
  color: #363F40;
  margin-top: -12px;
}

Button {
  padding: 7px;
  padding-left: 20px;
  padding-right: 20px;
  background-color: #363F40;
  border: none;
}

a {
  color: white;
  font-family: Open Sans;
  font-weight: 900;
  font-size: 15px;
  text-decoration: none;
}


/*clases*/

#talleresColombia {
  background-color: antiquewhite;
  display: none;
  width: 500px;
  height: 280px;
}


/*mapas*/

.latinoamerica {
  display: inline-block;
  width: 500px;
}

.cuerpo {
  display: flex;
  align-items: center;
}

.cls-1 {
  fill: #ffb100;
  stroke: #000;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cls-1 {
  stroke-width: 0.25px;
}


/*HOVER_____________________*/

#panama:hover {
  fill: #00c6d9;
}

#panama:hover #talleresColombia {
  display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

<div class="cuerpo">
  <div class="latinoamerica">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 106.28 170.91">
      <title>Latinoamerica</title>
      <g id="Capa_2" data-name="Capa 2">
        <g id="BACKGROUND">
          <polygon id="Colombia" class="cls-1" points="9.92 25.97 10.91 26.62 11.3 26.62 11.82 27.17 11.74 27.49 11.83 27.78 12.5 27.84 13.27 28.21 13.54 28.39 14.24 28.55 14.51 28.3 14.49 27.85 14.81 27.6 14.97 27.6 15.63 27.84 15.97 28.03 16.07 28.32 16.37 28.48 16.42 28.51 16.57 28.5 16.83 28.75 17.62 28.95 18.11 29.05 18.24 29.29 18.77 29.91 18.81 30.33 19.18 31.01 19.46 31.01 20.51 31.36 20.96 32.01 20.94 32.53 21.1 32.58 21.46 32.76 21.66 33.31 21.51 33.53 21.64 33.85 22.05 34.03 22.51 33.91 22.89 34.01 23.43 33.99 23.66 33.8 24.36 33.49 24.96 33.6 25.48 33.85 26.24 33.52 26.64 33.52 26.82 33.77 27.07 33.76 27.56 33.99 27.78 34.3 28.21 34.15 28.25 34.45 26.82 36.87 26.89 37.14 27.39 37.09 27.94 37.04 28.28 37.41 28.39 37.89 28.75 36.67 29.99 32.07 30.01 31.74 30.04 30.99 29.5 30.04 28.67 29.41 28.29 28.91 28.23 27.71 29.71 27.2 30.23 27.55 30.34 27.18 30.09 26.91 30.32 26.64 30.01 26.05 29.16 25.83 28.96 25.31 29.1 24.59 31.59 24.58 31.86 24.28 32.29 24.28 32.53 24.5 32.82 24.45 33.25 23.98 33.85 23.82 33.97 24.16 34.34 24.6 34.42 25.09 34.41 25.69 34.99 25.62 35.01 25.62 34.97 25.2 34.54 24.08 34.28 23.52 34.4 23.28 34.17 22.84 33.96 22.71 33.86 22.36 33.77 22.26 33.55 22.42 33.31 22.34 33.25 22.02 33.96 20.72 33.48 19.55 33.47 19.29 33.23 18.94 33.21 18.25 33.21 18.24 33.38 17.69 33.34 17.41 33.21 16.62 33.45 16.31 33.98 16.16 34.12 15.88 34.12 15.49 34.3 15.14 34.16 14.29 33.8 14.11 33.42 14.12 33.31 14.24 32.71 14.19 32.27 14.2 31.86 14.43 31.57 14.27 31.12 14.13 30.95 14.2 30.79 14.06 30.18 14.19 28.52 12.54 28.13 12.38 27.42 12.24 26.79 12.36 26.63 12.49 26.1 12.33 25.53 12.32 25.53 12.32 25.17 12.5 24.71 12.28 24.32 12.23 23.7 11.96 23.2 11.54 23.18 11.22 23.33 10.97 23.3 10.66 23.52 10.19 23.41 9.77 23.02 9.18 22.15 7.59 21.77 7.57 21.48 7.61 21.53 7.38 21.86 6.67 21.93 5.94 21.78 5.56 21.91 5.11 22.61 4.11 22.96 3.81 23.31 3.3 23.69 3.21 23.89 2.95 24.55 1.93 25.68 1.5 25.79 1.42 26.03 1.42 26.09 1.35 26.35 1.16 26.44 0.91 26.19 0.57 25.39 0.14 25.08 0.13 24.96 0.32 24.93 0.53 24.6 0.57 24.42 0.71 24.06 0.67 23.74 0.8 23.57 1 23.76 1.22 23.61 1.43 23.04 1.72 22.28 2.18 21.77 2.54 21.19 2.67 20.54 2.71 19.82 2.64 19.38 2.88 19.41 3.15 19.55 3.5 19.5 3.84 19.17 4.14 18.95 4.05 19.03 3.7 18.98 3.59 19.3 3.48 18.84 3.43 18.28 3.19 18 3.21 17.26 3.65 17.09 3.96 16.6 4.53 16.01 5.64 15.93 5.96 16.11 5.88 16.26 6.05 16.33 6.42 16.2 6.81 15.88 6.97 15.47 7 15.15 7.18 14.58 7.73 14.34 7.86 13.91 8.49 13.66 8.53 13.29 8.54 13.42 8.96 13.8 9.38 13.8 9.93 13.58 10.4 13.34 10.38 12.95 10.05 12.99 9.89 13.14 9.64 12.8 9.5 12.66 9.08 12.17 8.66 12.08 9.04 12.15 9.33 12.35 9.88 12.03 10.44 11.88 10.98 11.61 11.19 11.4 11.21 11.11 11.87 11.2 11.96 11.3 12.46 11.34 12.97 11.77 13.5 11.94 13.49 12.16 13.38 12.28 13.57 12.33 14.06 12.06 14.36 12.05 14.55 12.31 14.84 12.31 15.45 12.03 15.67 11.85 15.99 12.03 16.06 12.2 16.46 12.15 17.21 12.19 18.23 11.89 18.59 11.83 18.9 12.09 19.27 12.48 19.1 12.43 19.35 12.65 19.67 12.88 19.64 12.9 19.85 12.68 20.14 12.49 20.63 11.66 21.45 11.44 21.91 10.82 22.52 9.99 22.7 9.36 23.17 8.75 24.1 8.66 24.83 8.56 25.23 9.2 25.48 9.92 25.97"/>
        </g>
      </g>
    </svg>
  </div>
  <div id="talleresColombia">
    <h1>TALLERES</h1>
    <svg height="5">
      <line x1="0" y1="0" x2="100" y2="0" style="stroke:#ffb100;stroke-width:8;"/>
    </svg>
    <h2>Gestión de Riesgos</h2>
    <h3>9 y 10 de mayo 2017</h3>
    <p>A partir de un análisis de Stakeholders, para mantener la licencia para operar y crecer En el contexto social y ambiental actual la Gestión de Riesgos del Entorno puede significar la rentabilidad esperada de un proyecto o una operación, la reputación y la calidad en el relacionamiento con los stakeholders.</p>
    <button> <a href="http://google.com">VER MÁS</a> </button>
  </div>
</div>

2

Si puedes lograrlo con puro css pero existen limitaciones, por ejemplo el div que quieres mostrar debe ser decendiente directo del svg al que quieres hacer hover, otra limitante es que cuando el mouse sale del area el div desaparece. Lo que puedes hacer es ocultar todos los div e ir mostrando el que necesitas según el hover

.hidden {
  display: none;
}

#svg-1:hover+.show-1 {
  display: block;
}

#svg-2:hover+.show-2 {
  display: block;
}

#svg-3:hover+.show-3 {
  display: block;
}

#svg-4:hover+.show-4 {
  display: block;
}

.show {
  width: 100%;
  height: 100%;
  padding-top: 5px;
  position: absolute;
}
<svg id="svg-1" width="100" height="100" version="1.1" xmlns="http://www.w3.org/2000/svg">
			<rect fill="#000" x="10" y="10" width="100" height="30"/>
		</svg>
<div class="hidden show show-1">
  <p>Death there mirth way the noisy merit. Piqued shy spring nor six though mutual living ask extent. Replying of dashwood advanced ladyship smallest disposal or. Attempt offices own improve now see. Called person are around county talked her esteem. Those
    fully these way nay thing seems.</p>
</div>
<svg id="svg-2" width="100" height="100" version="1.1" xmlns="http://www.w3.org/2000/svg">
			<rect fill="#F00" x="10" y="10" width="100" height="30"/>
		</svg>
<div class="hidden show show-2">
  <p>In to am attended desirous raptures declared diverted confined at. Collected instantly remaining up certainly to necessary as. Over walk dull into son boy door went new. At or happiness commanded daughters as. Is handsome an declared at received in
    extended vicinity subjects. Into miss on he over been late pain an. Only week bore boy what fat case left use. Match round scale now sex style far times. Your me past an much. </p>
</div>
<svg id="svg-3" width="100" height="100" version="1.1" xmlns="http://www.w3.org/2000/svg">
			<rect fill="#0F0" x="10" y="10" width="100" height="30"/>
		</svg>
<div class="hidden show show-3">
  <p>Still court no small think death so an wrote. Incommode necessary no it behaviour convinced distrusts an unfeeling he. Could death since do we hoped is in. Exquisite no my attention extensive. The determine conveying moonlight age. Avoid for see marry
    sorry child. Sitting so totally forbade hundred to.</p>
</div>
<svg id="svg-4" width="100" height="100" version="1.1" xmlns="http://www.w3.org/2000/svg">
			<rect fill="#00F" x="10" y="10" width="100" height="30"/>
		</svg>
<div class="hidden show show-4">
  <p>Any delicate you how kindness horrible outlived servants. You high bed wish help call draw side. Girl quit if case mr sing as no have. At none neat am do over will. Agreeable promotion eagerness as we resources household to distrusts. Polite do object
    at passed it is. Small for ask shade water manor think men begin.</p>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.